對於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的，展開數據后再判斷渲染與否。