<div> <div> <button @click='setVal1'>setVal1</button> <button @click='setVal2'>setVal2</button> <button @click='setLength'>setLength</button> </div> <ul> <li v-for="item in items" >{{ item }}</li> </ul> <p>{{ message }}</p> </div>
<script> var watchFunc = function(){ example.message = '数据发生变化'; setTimeout(function(){ example.message = ''; },500); } var example = new Vue({ el: '#example', data: { items: ['Foo','Bar','Baz'], message:'', }, watch:{ items:watchFunc }, methods:{ setVal1(){ Vue.set(this.items, 0, 'match') }, setVal2(){ this.items.splice(1, 1, 'xiaohuochai') }, setLength(){ this.items.splice(2) } } }) </script>
过滤排序
有时，要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性
【computed】
<div> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>
<script> var example = new Vue({ el: '#example', data: { numbers: [ 1, 2, 3, 4, 5 ], }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } } }) </script>
【methods】
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 可以使用一个 method 方法
<div> <ul> <li v-for="n in even(numbers)">{{ n }}</li> </ul> </div>
<script> var example = new Vue({ el: '#example', data: { numbers: [ 1, 2, 3, 4, 5 ], }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } }) </script>
总结
以上所述是小编给大家介绍的Vue数组更新及过滤排序功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: