vue- 列表
总结：
1.vue监视data所有层次的数据
2. 如何检测对象中的数据：
通过setter监视，且要在new vue 的时候就传入检测的数据
（1）对象中追加的属性，Vue不做响应式处理
（2）后添加的需要做响应式的话
Vue.set(target,propertyName/index,val)
vm.$set(target,propertyName/index,val)
3.如何检测数组中数据的变化
通过包裹数组更新方法实现，本质就是
（1）调佣原生方法对数组进行更新
（2）重新解析模板，更新页面
4.vue修改数组使用如下方法：
1.push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2.Vue.set() vm.$set()
特别注意：Vue.set() vm.$set()不能给vm和vm的跟数据添加属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
<button @click="student.age++">年龄+1</button><br/>
<button @click="addSex">添加属性性别，默认男</button><br/>
<button @click="addFriend">在列表首位添加一个朋友</button><br/>
<button @click="updateFirstFriendName">修改第一个朋友的名字</button><br/>
<button @click="addHobby">添加一个爱好</button><br/>
<button @click="updateHobby">更新第一个爱好</button><br/>
<h1>学生信息</h1>
<h2>姓名：{{student.name}}</h2>
<h2>年龄：{{student.age}}</h2>
<h2>性别：{{student.sex}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h2>朋友</h2>
<h2></h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}-{{f.age}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
student:{
name:'tom',
age:18,
hobby:['篮球','游戏','学习'],
friends:[
{name:'steven',age:18},
{name:'lili',age:20}
]
}
},methods:{
addSex(){
Vue.set(this.student,'sex','男')
},
addFriend(){
//在列表首位添加一个朋友
this.student.friends.unshift({name:'abs',age:19})
},
updateFirstFriendName(){
this.student.friends[0].name = '修改'
},
addHobby(){
//push向数组最后添加
this.student.hobby.push('睡觉')
},
updateHobby(){
//从第0个开始删除删1个，然后插入一个做饭
//this.student.hobby.splice(0,1,'做饭')
//操作hobby，将第0个变成做饭
this.$set(this.student.hobby,0,'做饭')
}
}
})
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「人生海海~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lihuihui01/article/details/122906502
