解决方案有两个能够根据具体情况而定
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 , 能够削减加载的压力