解决方案有两个可以根据具体情况而定
1.当控制v-if的元素不存在v-for中 , 可以使用template包裹住对应的v-for , 也可以使用父级元素添加v-if , 可以不加载从而优化性能
添加一个template
<div>
<template v-if="showActive">
<div v-for"item in list" :key="item.id">{{item.value}}</div>
</template>
<div class="bottom"/>
</div>
添加到父级
<ul v-if="showActive">
<li v-for="item in list" :key="item.id">{{item.value}}</li>
</ul>
2.如果v-if 控制的元素存在v-for中 , 可以通过使用计算器属性来回避 , 比如使用计算器属性在页面加载之前进行一边过滤
computed: {
loadList() {
const { list } = this
return list.filter(item => item.value)
}
}
问题的实质是因为在vue中会优先执行v-for, 当v-for把所有内容全部遍历之后 , v-if再对已经遍历的元素进行删除 , 造成了加载的浪费 , 所以应该在执行v-for之前优先执行v-if , 可以减少加载的压力