首页 > 编程语言 > 详细

Vue数组更新

时间:2019-02-16 22:20:54      阅读:211      评论:0      收藏:0      [点我收藏+]
<!--
数组更新 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
});
}
},

 

Vue数组更新

原文:https://www.cnblogs.com/niusan/p/10389494.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!