| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> Vue 表单、事件处理、$set 生命周期 -> 正文阅读 |
|
|
[JavaScript知识库]Vue 表单、事件处理、$set 生命周期 |
1. 指令综合案例-信息表<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>指令综合练习</title>
</head>
<style>
? ?/* 90分以上 */
? ?.active1 {
? ? ? ?background-color: blue;
? ? ? ?color: white;
? }
?
? ?/* 60分以下 */
? ?.active2 {
? ? ? ?background-color: red;
? ? ? ?color: white;
? }
</style>
?
<body>
? ?<div id="app">
? ? ? ?<!-- 1. 页面结构 -->
? ? ? ?<!-- 添加表单 -->
? ? ? ?<input placeholder="用户名" v-model="stuInfo.name">
? ? ? ?<hr>
? ? ? ?<input placeholder="电话" v-model="stuInfo.tel">
? ? ? ?<hr>
? ? ? ?<input placeholder="成绩" v-model="stuInfo.score">
? ? ? ?<hr>
? ? ? ?<button @click="addStudent">添加用户信息</button>
? ? ? ?<hr>
? ? ? ?<!-- 表单遍历用户的信息列表 -->
? ? ? ?<table width="600" border="1" style="border-collapse: collapse;">
? ? ? ? ? ?<thead>
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<th>ID</th>
? ? ? ? ? ? ? ? ? ?<th>姓名</th>
? ? ? ? ? ? ? ? ? ?<th>电话</th>
? ? ? ? ? ? ? ? ? ?<th>成绩</th>
? ? ? ? ? ? ? ? ? ?<th>等级</th>
? ? ? ? ? ? ? ? ? ?<th>操作</th>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ?</thead>
?
? ? ? ? ? ?<tbody>
? ? ? ? ? ? ? ?<!-- 3. 遍历和渲染数据 -->
? ? ? ? ? ? ? ?<tr
? ? ? ? ? ? ? ? ? ?v-for="(item,index) in students"
? ? ? ? ? ? ? ? ? ?:key="item.id"
? ? ? ? ? ? ? ? ? ?:class="{ active1:item.score>=90,active2:item.score < 60 }"
? ? ? ? ? ? ? ?>
? ? ? ? ? ? ? ? ? ?<td>{{item.id}}</td>
? ? ? ? ? ? ? ? ? ?<td>{{item.name}}</td>
? ? ? ? ? ? ? ? ? ?<td>{{item.tel}}</td>
? ? ? ? ? ? ? ? ? ?<td>{{item.score}}</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?<span>优</span>
? ? ? ? ? ? ? ? ? ? ? ?<span>良</span>
? ? ? ? ? ? ? ? ? ? ? ?<span>中</span>
? ? ? ? ? ? ? ? ? ? ? ?<span>差</span>
? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?<button @click="deleteStu( index )">删除</button>
? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ? ?<!-- <tr class="active1">
? ? ? ? ? ? ? ? ? ?<td>111</td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td>95</td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>111</td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ? ?<tr class="active2">
? ? ? ? ? ? ? ? ? ?<td>111</td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ? ? ?<td>60</td>
? ? ? ? ? ? ? ? ? ?<td></td>
? ? ? ? ? ? ? ?</tr> -->
?
? ? ? ? ? ? ? ?<tr v-if="students.length == 0">
? ? ? ? ? ? ? ? ? ?<td colspan="5">暂无数据</td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ?</tbody>
?
? ? ? ?</table>
? ? ? ?<button @click="deleteAll">全部删除</button>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?//2. 初始化数据
? ? ? ? ? ?students: [
? ? ? ? ? ? ? { id: 1, tel: '15811', name: '诸葛亮', sex: '男', score: 98 },
? ? ? ? ? ? ? { id: 2, tel: '15822', name: '周瑜', sex: '男', score: 88 },
? ? ? ? ? ? ? { id: 3, tel: '15833', name: '刘阿斗', sex: '男', score: 50 },
? ? ? ? ? ? ? { id: 4, tel: '15855', name: '曹植', sex: '男', score: 90 },
? ? ? ? ? ? ? { id: 5, tel: '15866', name: '张飞', sex: '男', score: 70 },
? ? ? ? ? ? ? { id: 6, tel: '15888', name: '曹丕', sex: '男', score: 55 }
? ? ? ? ? ],
? ? ? ? ? ?stuInfo: {
? ? ? ? ? ? ? ?name: '',
? ? ? ? ? ? ? ?tel: '',
? ? ? ? ? ? ? ?score: ''
? ? ? ? ? }
? ? ? },
? ? ? ?methods: {
? ? ? ? ? ?//4. 添加学生方法
? ? ? ? ? ?addStudent() {
? ? ? ? ? ? ? ?console.log(this.stuInfo, '-----')
? ? ? ? ? ? ? ?this.stuInfo.id = Math.random()
? ? ? ? ? ? ? ?this.students.push(this.stuInfo) //添加到后面
?
? ? ? ? ? ? ? ?this.stuInfo = { //重置
? ? ? ? ? ? ? ? ? ?name: '',
? ? ? ? ? ? ? ? ? ?tel: '',
? ? ? ? ? ? ? ? ? ?score: ''
? ? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? ?//删除一个学生
? ? ? ? ? ?deleteStu(index){
? ? ? ? ? ? ? ?//删除数组中的一个数据。
? ? ? ? ? ? ? ?//splice()
? ? ? ? ? ? ? ?//曹植 索引3
? ? ? ? ? ? ? ?this.students.splice( index,1 )
? ? ? ? ? },
? ? ? ? ? ?deleteAll(){
? ? ? ? ? ? ? ?this.students = []
? ? ? ? ? }
? ? ? }
? })
</script>
?
</html>
2.表单单行文本框，多行，单选，复选，下拉框 2.1 数据绑定1.输入框 2.单选框 3.下拉菜单 4.多选框 ?
<body>
? ?<div id="app">
? ? ? ?<h2>数据收集</h2>
? ? ? 用户名：<input type="text" placeholder="用户姓名" v-model="userInfo.username">
? ? ? ?<hr>
? ? ? ?<!-- v-model.number ? .number 代表修饰符，获取的数据会转换成number类型-->
? ? ? 年龄：<input type="number" placeholder="年龄" v-model.number="userInfo.age">
? ? ? ?<hr>
? ? ? ?<!--
? ? ? ? ? ?单选框，原生需要为一组单选框设置相同的name属性值，这里不需要
? ? ? ? -->
? ? ? ? 性别：<input type="radio" value="1" v-model="userInfo.sex"> 男<input type="radio" value="2" v-model="userInfo.sex"> 女 ?<input type="radio" value="3" v-model="userInfo.sex"> 保密
?
? ? ? ? <hr>
? ? ? ? <!--
? ? ? ? ? ? 复选框：原生需要为一组单选框设置相同的name属性值，这里不需要
? ? ? ? ? ? ? ? ? ?初始数据需要定义数组而不是字符串
? ? ? ? ? ? ? ? ? ?如果有些value值是数值number类型，可以在value前面加 :
? ? ? ? ?-->
? ? ? ? 爱好：<input type="checkbox" :value="1" v-model="userInfo.hobbies">吃饭
? ? ? ? ?<input type="checkbox" :value="2" v-model="userInfo.hobbies">睡觉
? ? ? ? ?<input type="checkbox" :value="3" v-model="userInfo.hobbies">打豆豆
?
?
? ? ? ? ?<hr>
? ? ? ? ?<!-- 下拉框 ：单选-->
? ? ? ? 职业：<select v-model="userInfo.jobIndex">
? ? ? ? ? ? ? ?<option value="" disabled>请选择</option>
? ? ? ? ? ? ? ?<option :value="index" v-for="(item,index) in jobs">{{item}}</option>
? ? ? ? ? ? ? ?<!-- <option value="1">php工程师</option>
? ? ? ? ? ? ? ?<option value="2">web工程师</option>
? ? ? ? ? ? ? ?<option value="3">java工程师</option> -->
? ? ? ? ?</select>
? ? ? ? ?<hr>
? ? ? ? 零食：
? ? ? ? ?<select multiple v-model="userInfo.eats">
? ? ? ? ? ? ?<option value="" disabled>请选择</option>
? ? ? ? ? ? ?<option value="1">啤酒</option>
? ? ? ? ? ? ?<option value="2">花生</option>
? ? ? ? ? ? ?<option value="3">瓜子</option>
? ? ? ? ?</select>
? ? ? ? ?<hr>
? ? ? ? 备注：
? ? ? ? ?<textarea v-model="userInfo.tip" cols="30" rows="10"></textarea>
?
? ? ? ? ?<hr>
? ? ? ? 同意协议：
? ? ? ? ?<input type="checkbox" v-model="userInfo.isAgree">
? ? ? ? ?<hr>
? ? ? ?<button @click="addUser">添加用户</button>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
?
? ?// let n1 = 10
?
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?userInfo:{
? ? ? ? ? ? ? ?username:'',//用户姓名
? ? ? ? ? ? ? ?age:'',//年龄
? ? ? ? ? ? ? ?sex:'',//性别
? ? ? ? ? ? ? ?hobbies:[],//爱好
? ? ? ? ? ? ? ?jobIndex:'',//职业选择标识
? ? ? ? ? ? ? ?eats:[],//多选，设置成数组
? ? ? ? ? ? ? ?tip:'',//备注
? ? ? ? ? ? ? ?isAgree:false,//是否同意协议
? ? ? ? ? },
?
? ? ? ? ? ?jobs:[
? ? ? ? ? ? ? ?'php工程师',
? ? ? ? ? ? ? ?'java工程师',
? ? ? ? ? ? ? ?'web工程师'
? ? ? ? ? ]
? ? ? },
? ? ? ?methods:{
? ? ? ? ? ?addUser(){
? ? ? ? ? ? ? ?//这个函数执行，收集表单中的所有的信息
? ? ? ? ? ? ? ?console.log( this.userInfo )
? ? ? ? ? ? ? ?//验证数据格式是否正确
?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?//验证通过发送ajax
? ? ? ? ? ? ? ?/*
? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? url:'/adduser',
? ? ? ? ? ? ? ? ? ? ? data:this.userInfo // 得保证前端初始化的参数名和后端接口的参数名要一致
? ? ? ? ? ? ? ? ? })
?
? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? url:'/login',
? ? ? ? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? ? ? ? username:'xxx',
? ? ? ? ? ? ? ? ? ? ? ? ? password:'xxx'
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? method:'post'
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? */
? ? ? ? ? }
? ? ? }
? })
</script>
2.2 表单修饰符
v-model.修饰符 ?
<body>
? ?<div id="app">
? ? ? ?<!-- number lazy trim -->
? ? ? ?<input type="text" placeholder="搜索框" v-model.lazy="keyword">
? ? ? ?<hr>
? ? ? {{ keyword }}
? ? ? ?<hr>
? ? ? ?<!-- trim: 去除左右空格 -->
? ? ? ?<hr>
? ? ? ?<input type="text"v-model.trim="password" >
? ? ? ?<hr>
? ? ? ----{{password}}====
? ? ? ?
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?keyword:'web',
? ? ? ? ? ?age:20,
? ? ? ? ? ?password:''
? ? ? },
? ? ? ?
? })
</script>
2.3 表单事件注意事项单选框、多选框、下拉菜单如果要绑定事件，都是change,不要使用click ?
<body>
? ?<div id="app">
? ? ? ?<input type="checkbox" v-model="isAgree" @change="isShow"> 同意协议
? ? ? ?<div v-show="isAgree">
? ? ? ? ? 协议具体内容
? ? ? ?</div>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?isAgree:false
? ? ? },
? ? ? ?methods:{
? ? ? ? ? ?isShow(){
? ? ? ? ? ? ? ?console.log( this.isAgree,'---' )
? ? ? ? ? }
? ? ? }
? })
</script>
3 事件处理事件兼听的语法（ addEventListerner/removeEventListernver: attachEvent/detachEvent ）、 事件对象：ev = ev || event 事件流：冒泡和捕获 委托|代理：冒泡+事件源 阻止冒泡：event.cancelBubble = true event.stopPropagation() 阻止默认行为: return false || event.preventDefault() 键盘事件：键码 滚轮事件：向上/向下 拖拽原理：.... 3.1 如何绑定事件及传参3.2 事件对象 event
<body>
? ?<div id="app">
? ? ? ?<!--
? ? ? ? ? ?v-on:事件名=事件函数( [$event],参数列表 )
? ? ? ? ? ?@事件名=事件函数( [$event],参数列表 )
? ? ? ? -->
? ? ? ? <!-- 1. 调用事件函数没有写小括号，默认会把事件对象传递过去：隐式传递事件对象e -->
? ? ? ? <button @click="handler1">不传参</button>
? ? ? ? <hr>
? ? ? ? <!-- 2.带小括号，但也要传递事件对象，则必须使用$event而且是第1个参数 -->
? ? ? ? <button @click="handler2($event,11,22)">带小括号，但也要传递事件对象，则必须使用$event而且是第1个参数</button>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? },
? ? ? ?methods:{
? ? ? ? ? ?handler1( e ){
? ? ? ? ? ? ? ?console.log( 'handler1',e )
? ? ? ? ? },
? ? ? ? ? ?handler2( e ){
? ? ? ? ? ? ? ?console.log( 'handler2',e )
? ? ? ? ? },
?
? ? ? }
? })
</script>
3.3 阻止默认事件 阻止事件传播原生写法 ?
<body>
? ?<div id="app">
? ? ? ?<!-- 1. 默认行为：开发者没有绑定事件，但是用户进行了一些操作从而触发了某些事件产生的效果，这是事件的默认行为 -->
? ? ? ?<a href="http://www.baidu.com" @click="handler1">百度</a>
? ? ? ?<!--
? ? ? ? ? ?如何取消：哪个元素身上的什么事件触发的默认行为,那么就在此元素身上的此事件进行阻止
? ? ? ? -->
?
? ? ? ? <!-- 2. 事件流：冒泡 -->
? ? ? ? <div style="border:1px solid red; padding:20px" @click="outerHander">
? ? ? ? ? ? <button @click="innerHander( $event )">按钮</button>
? ? ? ? </div>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? },
? ? ? ?methods:{
? ? ? ? ? ?handler1(e){
? ? ? ? ? ? ? ?//e.preventDefault() //return false
? ? ? ? ? },
? ? ? ? ? ?outerHander(){
? ? ? ? ? ? ? ?console.log( 'outer' );
? ? ? ? ? },
? ? ? ? ? ?innerHander(e){
? ? ? ? ? ? ? ?console.log( 'innerHander' );
? ? ? ? ? ? ? ?e.stopPropagation()
? ? ? ? ? }
? ? ? }
? })
</script>
self之弹框应用 用户在做编辑、删除等不可逆操作的时候，经常会有弹框提示 这个弹框会有 mask 遮照层（ 确定和取消 ： confirm/cancel ） <style>
? ?.mask {
? ? ? ?width: 100vw;
? ? ? ?height: 100vh;
? ? ? ?background-color: rgba(0, 0, 0, 0.2);
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 0;
? }
?
? ?.con {
? ? ? ?width: 300px;
? ? ? ?height: 200px;
? ? ? ?background-color: white;
? ? ? ?position: absolute;
? ? ? ?top: 50%;
? ? ? ?left: 50%;
? ? ? ?transform: translate(-50%, -50%);
? }
?
? ?/* 居中方式有多少种？ */
</style>
?
<body>
? ?<div id="app">
? ? ? ?<!--
? ?用户在做编辑、删除等不可逆操作的时候，经常会有弹框提示
? ?这个弹框会有 mask 遮照层（ 确定和取消 ： confirm/cancel ）
-->
? ? ? ?<ul>
? ? ? ? ? ?<li>用户名：xx1 <button @click="delUserByIndex">删除</button></li>
? ? ? ? ? ?<li>用户名：xx2 <button @click="delUserByIndex">删除</button></li>
? ? ? ? ? ?<li>用户名：xx3 <button @click="delUserByIndex">删除</button></li>
? ? ? ?</ul>
? ? ? ?<!--
? ? ? ?有些网站交互点击遮照层区域，也可以理解为隐藏
? ? -->
?
?
? ? ? ?<div class="mask" v-show="isShow" ?@click.self="cancel">
? ? ? ? ? ?<div class="con">
? ? ? ? ? ? ? ?<button @click="confirm">确定</button>
? ? ? ? ? ? ? ?<button @click="cancel">取消</button>
? ? ? ? ? ?</div>
? ? ? ?</div>
?
? ?</div>
? ?<script src="vue.js"></script>
? ?<script>
? ? ? ?new Vue({
? ? ? ? ? ?el: '#app',
? ? ? ? ? ?data: {
? ? ? ? ? ? ? ?isShow: false,//控制弹框是否显示
? ? ? ? ? },
? ? ? ? ? ?methods: {
? ? ? ? ? ? ? ?delUserByIndex() {
? ? ? ? ? ? ? ? ? ?this.isShow = true
? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?cancel(){
? ? ? ? ? ? ? ? ? ?this.isShow = false
? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?confirm(){
? ? ? ? ? ? ? ? ? ?console.log( '才真正的要删除' );
? ? ? ? ? ? ? ? ? ?this.cancel()
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? })
? ?</script>
3.4 事件修饰符.prevent 阻止默认事件 .stop 阻止事件传播 .self 触发的目标元素是自己才执行 .once 一次性事件绑定 ： 了解 .capture 实现事件捕获 .left 左键 .right 右键 .up 上键 .down 下键 .enter 回车 .13 键码 ?
<body>
? ?<div id="app">
? ? ? ?<!--
? ? ? ? ? ?.once 一次性事件绑定 ： 了解
? ? ? ? ? ?.left 左键
? ? ? ? ? ?.right 右键
? ? ? ? ? ?.up 上键
? ? ? ? ? ?.down 下键
? ? ? ? ? ?.enter 回车
? ? ? ? ? ?.13 键码
? ? ? ?-->
?
? ? ? ? ? ?<button @click.once="clickMe1">once</button>
? ? ? ? ? ?<button @click="clickMe2">clickMe2</button>
? ? ? ? ? ?<hr>
? ? ? ? ? ?<input
? ? ? ? ? ? ? ?placeholder="键盘事件修饰符"
? ? ? ? ? ? ? ?@keydown.left="keyHandlerLeft"
? ? ? ? ? ? ? ?@keydown.right="keyHandlerRight"
? ? ? ? ? ? ? ?@keydown.13.17="keyHandlerEnter"
? ? ? ? ? ?>
? ? ? ? ? ?<!-- @keydown.enter="keyHandlerEnter" -->
? ? ? ? ? ?<input
? ? ? ? ? ? ? ?placeholder="ctrlEnter发消息"
? ? ? ? ? ? ? ?@keydown="ctrlEnter"
? ? ? ? ? ?>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?flag:true
? ? ? },
? ? ? ?methods: {
? ? ? ? ? ?//ctrlEnter发消息
? ? ? ? ? ?ctrlEnter(e){
? ? ? ? ? ? ? ?// console.log( e );
? ? ? ? ? ? ? ?if( e.ctrlKey ?&& e.keyCode == 13 ){
? ? ? ? ? ? ? ? ? ?console.log('可以发消息')
? ? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? ?clickMe1(){
? ? ? ? ? ? ? ?console.log('clickMe1')
? ? ? ? ? },
? ? ? ? ? ?clickMe2(){
? ? ? ? ? ? ? ?if( !this.flag ){
? ? ? ? ? ? ? ? ? ?return
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?this.flag = false
? ? ? ? ? ? ? ?console.log('clickme2')
? ? ? ? ? },
? ? ? ? ? ?keyHandlerLeft(){
? ? ? ? ? ? ? ?console.log( '键盘按下-left' );
? ? ? ? ? },
? ? ? ? ? ?keyHandlerRight(){
? ? ? ? ? ? ? ?console.log( '键盘按下-right' );
? ? ? ? ? },
? ? ? ? ? ?keyHandlerEnter(e){
? ? ? ? ? ? ? ?console.log( e,'enter键');
? ? ? ? ? }
? ? ? }
? })
</script>
4.$setthis.$set(数据,"新增属性","值"): 原型链上的方法 Vue.set(数据,"新增属性","值")：静态方法。 3.1 对象的问题如果定义data的数据时没有某个字段，后面添加的字段，改变页面不会渲染。 3.2 数组的问题后端返回了数据，但是前端自己添加了某个字段，该字段改变，页面不会渲染。 ?
<body>
? ?<div id="app">
? ? ? 用户信息：对象
? ? ? ?<div>用户名：{{person.username}}</div>
? ? ? ?<div>性别：{{person.sex}}</div>
? ? ? ?<div>年龄：{{person.age}}</div>
?
? ? ? ?<button @click="getUserInfo">获取用户信息</button>
? ? ? ?<hr>
? ? ? ?<h2>数组</h2>
? ? ? ?<ul>
? ? ? ? ? ?<li v-for="(item,index) in persons">
? ? ? ? ? ? ? {{item.username}}--{{item.sex}} -- {{item.age}} <button @click="getUserAge(index)">获取这个年龄</button>
? ? ? ? ? ?</li>
? ? ? ?</ul>
? ?</div>
</body>
<script src="vue.js"></script>
<script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?person: {
? ? ? ? ? ? ? ?username: 'zs',
? ? ? ? ? ? ? ?sex: '女',
? ? ? ? ? ? ? ?//age:''
? ? ? ? ? },
? ? ? ? ? ?persons:[
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ?username: 'zs',
? ? ? ? ? ? ? ? ? ?sex: '女',
? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ?username: 'ls',
? ? ? ? ? ? ? ? ? ?sex: '男',
? ? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? },
? ? ? ?methods: {
? ? ? ? ? ?getUserAge(index){
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?//console.log( this.persons );
? ? ? ? ? ? ? ?//1. splice: 把当前项删除，然后整体替换
? ? ? ? ? ? ? ?// this.persons[index].age = 10 //第0项加age属性
? ? ? ? ? ? ? ?// let user =this.persons[index]
? ? ? ? ? ? ? ?// this.persons.splice( index,1,user )
?
? ? ? ? ? ? ? ?//2. this.$set( 更新哪个数组,'下标',整体替换value )
? ? ? ? ? ? ? ?this.persons[index].age = 20 //第0项加age属性
? ? ? ? ? ? ? ?let user =this.persons[index]
? ? ? ? ? ? ? ?this.$set( this.persons ,index, user)
? ? ? ? ? },
? ? ? ? ? ?getUserInfo() {
? ? ? ? ? ? ? ?// this.person.age = 20
? ? ? ? ? ? ? ?// console.log( this.person,'----' );
? ? ? ? ? ? ? ?// console.log( this,'----' );
? ? ? ? ? ? ? ?//1. this.$set( 更新哪个对象,key,value )
? ? ? ? ? ? ? ?//this.$set( this.person,'age',30 )
?
? ? ? ? ? ? ? ?//2. Vue.set(更新哪个对象,key,value ) : 静态方法
? ? ? ? ? ? ? ?Vue.set(this.person,'age',20 )
?
? ? ? ? ? ? ? ?//3. 把person整体覆盖
? ? ? ? ? ? ? ?// this.person = {
? ? ? ? ? ? ? ?// ? ? username: 'zs',
? ? ? ? ? ? ? ?// ? ? sex: '女',
? ? ? ? ? ? ? ?// ? ? age: 10
? ? ? ? ? ? ? ?// }
?
? ? ? ? ? }
? ? ? }
? })
? ?// Date.now() Object.assign ? Array.of Array.from
</script>
? ? ?
调用下面方法，视图都会更新： push() pop() shift() unshift() splice() sort() reverse() 这些方法会影响源数据 filter/find/findIndex/map/every/some 不会影响视图的变化 5.生命周期 |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年11日历 | -2025/11/30 3:11:13- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |