v-if指令,需要注意的是,除非必要,否则不要将v-if 和v-for用在同当一个元素上。当它们处于同一节点时,v-for 的优先级比 v-if 高,v-for 每次迭代时都会执行一次 v-if,这会造成不必要的计算开销,影响性能,尤其是当只需要渲染很小一部分的时候,表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤,以减少视图中的判断。例如:
1 <div id="app">
2 <p v-for="item in list" v-bind:key="item.id" v-if="item.id < 2">
3 {{item.name}}
4 </p >
5 </div>
即使 100 个 item 中只有一个符合 v-if 的条件,也需要循环整个数组,这在性能上是一种浪费。在这种情况下,可以使用计算属性,在数据模型中事先先做好处理,然后将符合条件的结果通过
v-for 显示出来,例如
1 <div id="app">
2 <p v-for="item in filteredlist" v-bind:key="item.id">
3 {{item.name}}
4 </p >
5 </div>
6 computed:{
7 filteredList(){
8 return this.list.filter(function(item){
9 //返回id小于2的项并添加到filteredlist数组中
10 return item.id < 2
11 })
12 }
13 }
两个的显示结果都是一样的,但是在性能上却相差很大。数据量小的情况下可能效果不太明显,但如果数据量大的话,区别量就会很明显。
另一种场景是,如果希望有条件地跳过循环的执行,那么应该将 v-if 置于外层元素上。例如
1 <div id="app">
2 <div v-if="products.length == 0">没有找到您搜索的产品</div>
3 <div v-else>
4 <p v-for="item in products" :key="item.id">
5 名称:{{item.name}} 价格:{{item.price}}
6 </p >
7 </div>
8 </div>
上述代码在外层<div>标记中判断想要迭代的数组长度,如果数组的长度为0,那么就不需要执行
v-for,直接显示“没用找到您搜索的商品”这句提示语就可以了。