Vue数组更新及过滤排序功能数组更新及过滤排序功能
Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。本文
将详细介绍Vue数组更新及过滤排序
前面的话前面的话
Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。本文将详细介
绍Vue数组更新及过滤排序
变异方法变异方法
Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法
push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
shift() 移除数组中的第一个项并返回该项,同时数组的长度减1
unshift() 在数组前端添加任意个项并返回新数组长度
splice() 删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员
sort() 调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组
reverse() 用于反转数组的顺序,返回经过排序之后的数组
<div id="example">
<div>
<button @click='push'>push</button>
<button @click='pop'>pop</button>
<button @click='shift'>shift</button>
<button @click='unshift'>unshift</button>
<button @click='splice'>splice</button>
<button @click='sort'>sort</button>
<button @click='reverse'>reverse</button>
</div>
<ul>
<li v-for="item in items" >
{{ item.message }}
</li>
</ul>
</div>
<script>
var example = new Vue({
el: '#example',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' },
{message: 'Baz' }
],
addValue:{message:'match'}
},
methods:{
push(){
this.items.push(this.addValue)
},
pop(){
this.items.pop()
},
shift(){
this.items.shift()
},
unshift(){
this.items.unshift(this.addValue)
},
splice(){
this.items.splice(0,1)
},
sort(){
this.items.sort()
},
reverse(){
this.items.reverse()