前言：
Vue的核心是数据与视图的双向绑定，当我名修改数组时，vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。
Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()——》会改变原始数组
filter()、concat()、slice()——》不会改变原始数组
示例：
<div id="app">
<ul>
<template v-for="(item,idx) in books">
<li>书名：{{item.name}}</li>
<li>作者：{{item.autor}}</li>
</template>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
books:[
{
name:‘《Vue.js实战》‘,
autor:‘粱澈‘
},
{
name:‘《 JavaScript 言精粹》‘,
autor:‘Douglas Crockford‘
},
{
name:‘《 JavaScript 高级程序设计》‘,
autor:‘Nicholas C.Zakas‘
}
]
}
})
app.books=app.books.filter(function(item){
return item.name.match(/JavaScript/); //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
})
</script>
渲染的结果中，第一项会被过滤掉
过滤与排序
当你不想改变原数组，想通过一个数组的副本来做过滤或排序显示时，可以使用计算属性来返回过滤或排序后的数组
<div id="app">
<ul>
<template v-for="(item,idx) in sortBooks">
<li>书名：{{item.name}}</li>
<li>作者：{{item.autor}}</li>
</template>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
books:[
{
name:‘《Vue.js实战》‘,
autor:‘粱澈‘
},
{
name:‘《 JavaScript 言精粹》‘,
autor:‘Douglas Crockford‘
},
{
name:‘《 JavaScript 高级程序设计》‘,
autor:‘Nicholas C.Zakas‘
}
]
},
computed:{
filterBooks:function(){ //过滤掉书名不含JavaScript
return this.books.filter(item => item.name.match(/JavaScript/))
},
sortBooks:function(){//根据书名的长度排序
return this.books.sort((a,b)=> a.name.length<b.name.length)
}
}
})
</script>
原文：https://www.cnblogs.com/HeLingping/p/14546976.html