v-for的显示过滤/排序结果
对于v-for列表渲染指令，项目中很常用的额，但是我们一般可能在从后端接口拿到数据的时候就把数据通过循环整理改造成自己想要的样子了。有时候可能对于不同的列表需求，还要在data里多造一份数据。
这种做法是非常累赘的。最好的方式是在v-for循环的时候对数据进行操作，从而可以做到维护源数据不变。
第一种：计算属性过滤
平时可能容易被忽视，在项目中用到的地方可能不是很多，或者常常直接就先整理再v-for了。
<body>
<div id="app">
<li v-for="n in evenNum" :key="n">
{{n}}
</li>
</div>
</body>
</html>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
num:[1,2,3,4,5]
},
computed:{
evenNum(){
return this.num.filter(item=>item%2==0)
}
},
methods:{
}
})
</script>
第二种：采用method，如果是嵌套v-for的话，计算属性不适用。
<body>
<div id="app">
<div v-for="(item,index) in num" :key="index" style="border:1px solid red;margin-bottom: 20px;">
<li v-for="n in filt(item)" :key="n">
{{n}}
</li>
</div>
</div>
</body>
</html>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
num:[[1,2,3,4],[5,6,7,8],[9,10,11,12]]
},
computed:{
},
methods:{
filt(item){
if(Math.max(...item)==8){
return item.filter(item=>item%2==0)
}else{
return item
}
}
}
})
</script>
总结：v-for的以上两个方法比较容易受忽视，其实它是非常强大实用的。能处理较为复杂的业务场景。
提示：v-for的优先级是大于v-if的，展开数据后再判断渲染与否。
