v-if为什么不建议跟v-for一起用

198 阅读1分钟

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令是基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名,同时建议设置key值,并且保证每个key值是独一无二的

在进行if判断的时候,v-for的优先级是比v-if高的,而且如果写在同一元素上会带来性能方面的浪费(每次渲染都会先循环再进行条件判断),因此为了避免出现这种情况,可以在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后再内部进行v-for循环