原因:
vue2.x 中v-for优先级高于v-if,而vue3.x 相反。
所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用,造成性能浪费;
在3.x 版本中 v-if 总是优先于 v-for 生效,导致v-if访问不了v-for中的变量。
该如何解决呢?
1.可以在外层嵌套template
(页面渲染不生成dom
节点),在这一层进行v-if判断,然后在内部进行v-for循环
<template v-if="show">
<div v-for="item in data"></div>
</template>
2.假如条件出现在循环内部,可通过计算属性computed
提前过滤掉那些不需要显示的项
computed: {
list () {
return this.list.filter(item=> {
return item.isShow
})
}
}