v-for和v-if不能直接一起使用

Posted 2023-04-28

参考技术A

不能直接这样写，会出现警告。

正确写法

注意： 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

vue v-for 和 v-if v-else一起使用造成的bug

现象：导致v-else 执行v-for的length次数，

从现象看应该v-for先解析，然后将v-if和v-else包在其中

 

解决方案：很简单，tempalte 将v-if v-else 隔离到最外层

<template vi-if>

< v-for>

</template>

<template v-else>

</template>

如此就不会有很奇怪的问题了