<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="demo"> <p>v-for遍历数组</p> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}} ---{{p.age}} ---{{index}} ----- <button @click="del(index)">删除</button> <button @click="update(index,{name:'Cat',age:46})">更新</button> </li> </ul> <p>v-for遍历对象</p> <ui> <li v-for="(value,key) in persons[1]" :key="key"> {{key}}-----{{value}} </li> </ui> </div> <script type="text/javascript" src="lib/vue.min.js"></script> <script type="text/javascript"> new Vue({ el: "#demo", data: { persons: [ // vue只是监视了persons的改变， 没有监视persons内部数组的改变 {name: 'Tom', age: 12}, {name: 'Admin', age: 13}, {name: 'Root', age: 16}, {name: 'Rose', age: 10}, ] }, methods: { del(index){ //删除指定的元素 this.persons.splice(index, 1) // 删除功能 }, update(index, newP){ // 没有调用vue 数组的变异方法 // this.persons[index] = newP; //该操作没有改变persons对象，只是改变了person指向的数组中的元素对象 this.persons.splice(index, 1, newP); // 修改功能，先将index这个元素删除，再将newP添加到这儿 // this.persons.splice(index, 0, newP); // 增加 } } }); </script> </body> </html>
vue数组中的增删改实现：
this.persons.splice(index, 1) // 删除index这个元素 this.persons.splice(index, 0, newP); // 添加元素newP this.persons.splice(index, 1, newP); // 将index下标元素改成newP