需要注意的是,除非必要,否则不要将v-if和v-for用在同一个元素上。当它们处于同一节点时,v-for的优先级比v-if高,v-for每次迭代时都会执行一次v-if,这会造成不必要的计算开销,影响性能,尤其是当只需要渲染很小一部分的时候,表现尤为明显。比较好的做法是直接再数据模型中对列表进行过滤,以减少视图中的判断。
<div id="app">
<p v-for="item in list" v-bind:key="item.id" v-if="item.id <2">
{{item.name}}
</p>
</div>
总结:当 v-if
与 v-for
一起使用时,v-for
具有比 v-if
更高的优先级,这意味着 v-if
将分别重复运行于每个 v-for
循环中
v-if的使用
v-for遍历数组