Vue数组更新

<!--

数组更新 7种 会改变原始数组的方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

Vue检测到数据变化会更新视图

不会改变原数组方法，可以使用新数组替代原数组

数组变化时，并不是直接渲染，而是最大的复用DOM元素，

替换数组的相同元素不会被重新渲染。无需担心性能问题.

filter()

slice()

concat()

Vue不能检测到

1，通过索引直接设置项

app.list[3] = {};

2， 修改数组长度

app.list.length = 1

Vue.set(this.list, index, item);

过滤与排序

不想改变原数组，通过一个数组的副本做过滤或者排序、

可以使用计算属性来返回过滤或排序后的数组

-->

< ol >

< li v-for="( item, index) in computedList" :key=" index" >{{ item. name}}-{{ item. age}} </ li >

</ ol >

< button @click=" setList" >Vue.Set </ button >

</ div >

 

 

methods: {

setList() {

// this.list[2] = { name: "zhangsan2", age: 30 };

this. $set( this. list, 2, {

name: "lisi",

age: 30

});

}

},

 

转载于:https://www.cnblogs.com/niusan/p/10389494.html