除非必要,否则不要将 v-if和 v-for 用在同一个元素上。
当它们处于同一节点时,v-for 的优先级比 v-if 高,v-for 每次迭代时都会执行一次 v-if,这会造成不必要的计算开销,影响性能,尤其是当只需要渲染很小一部分的时候,表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤,以减少视图中的判断。
<div id="app">
<p v-for="item in filteredList" v-bind:key="item.id">
{{item.name}}
</p>
</div>
computed:{
filteredList(){
return this.list.filter(function(item) {
// 返回id小于2的项斌添加到filteredList数组中
return item.id < 2
})
}
}
另一种场景是,如果希望有条件地跳过循环的执行,那么应该将 v-if置于外层元素上。例如,在一个电商网站的产品列表页面中,通常会先判断一下这个列表中的产品数量。如果列表是空的(例如没有搜索到用户查找的产品),那就显示一句提示语,而不再显示列表,代码如下:
<div id="app">
<div v-if="products.length == 0">没有找到您搜索的产品</div>
<div v-else>
<p v-for="item in products" :key="item.id">
名称:{{item.name}} 价格:{{item.price}}
</p >
</div>
</div>
Vue.js 的两个关键指令V if 指令和 v-for 指令,它们分别用于条件渲染和列表渲染。
v-if 指令需要与 v-show 指令今分开使用。
v-for 指令需要 key 属性的配合,此外还要留意数组元素更新时的限制情况