v-if 与 v-for 的优先级

Vue 里面 v-if 和 v-for 是可以一起使用作用在某个元素上，只是不太推荐这种方式，下面是官网的介绍:

可以举个例子了解一下：

<div id="app">
    <ul>
        <li v-for="item in Nums" v-if="item%2==0">{{item}}->偶数</li>
        <li v-else-if="item%3==0">{{item}}->可以被3整除的奇数</li>
        <li v-else>{{item}}->其它奇数</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            Nums:[0,1,2,3,4,5,6,7,8,9,10,11,12]
        }            
    })
</script>

通过结果可以知道 Vue 会先执行 v-for 得到 item 然后执行 v-if 判断是否展示。

以上做法虽然可以，但是官网并不推荐，原因是会影响性能增加渲染时长，我们可以在渲染之前把数据处理好：

filters: {
  Nums2: function(value) {
    return value.filter(i => i%2===0)
  }
}
// 或者
computed: {
  newNums() {
    return Nums.filter(i => i%2===0)
  }
}