Vue 里面 v-if 和 v-for 是可以一起使用作用在某個(gè)元素上，只是不太推薦這種方式，下面是官網(wǎng)的介紹:

可以舉個(gè)例子了解一下：

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

通過(guò)結(jié)果可以知道 Vue 會(huì)先執(zhí)行 v-for 得到 item 然后執(zhí)行 v-if 判斷是否展示。

以上做法雖然可以，但是官網(wǎng)并不推薦，原因是會(huì)影響性能增加渲染時(shí)長(zhǎng)，我們可以在渲染之前把數(shù)據(jù)處理好：

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