陣列渲染與條件渲染一起使用
不建議將 v-for 與 v-if 在同一個 element 中一併使用，改以透過 computed 的方式，先將要顯示的內容過濾後，再使用 v-for 渲染

<!-- bad -->
<ul>
<li v-for="item in products" v-if="item.isActive" :key="item.id">{{ item.name }}
</li>
</ul>
<!-- good -->
<ul>
<li v-for="item in activeProducts" :key="item.id">{{ item.name }}</li>
</ul>

new Vue({
data: {
products: [ ... ]
}
computed: {
activeProducts: function() {
return this.products.filter(product => product.isActive);
}
}
});

若 v-for 與 v-if 一併使用，則 v-for 有較高的優先度