我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
数组更新检测：
变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<h2>v-for遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}----{{p.name}}----{{p.age}}
--- <button @click="deleteP(index)">删除</button>---- <button @click="updateP(index,{name:'Cat',age:20})">更新</button>
</li>
</ul>
<h2>v-for遍历对象</h2>
<ul>
<li v-for="(item,key) in persons[1]">
{{item}}--->{{key}}
</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
persons:[ //vue本身只是监视了persons的改变，没有监视数组内部数据的改变
//Vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，后更新界面）-》数组内部改变，界面自动变化
{name:'Tom',age: 18},
{name:'ccc',age: 16},
{name:'jjj',age: 17},
{name:'xxx',age: 19},
]
},
methods:{
deleteP(index){
//删除persons中指定index的p
this.persons.splice(index,1)
},
updateP(index,newP){
//this.persons[index] = newP
// 并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
//this.persons = []
this.persons.splice(index,1,newP);
}
}
})
</script>
</html>
网友评论