原因:
因为两者的优先级不一样,v-for 的优先级比 v-if 高,如果一起使用,每次渲染时都会先循环再进行条件判断,先循环再做判断会造成性能浪费,使用过程中不要把它们放在同一个元素上。
解决方法:
1.将v-if放在外层嵌套 template(页面渲染不生成dom节点),在这一层先进行 v-if 判断,然后在内部进行v-for循环。
<template v-if="isShow">
<p v-for="item in list">
</template>
2.如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项。
computed: {
items: function() {
return this.list.filter(item => 筛选条件)
}
}