vue踩坑系列-v-for和v-if的重复循环
遇到的问题是: 前端获取的数据是正确的,渲染传参也是正确的。但是在页面展示时却出现了重复渲染。代码如下:<ul><li v-for="(item, index) in data" :key="index" v-if="show"> 111 </li>&a
·
遇到的问题是:
前端获取的数据是正确的,渲染传参也是正确的。但是在页面展示时却出现了重复渲染。代码如下:
<ul>
<li v-for="(item, index) in data" :key="index" v-if="show"> 111 </li>
<li v-for="(item, index) in data" :key="index" v-else> 222 </li>
</ul>
但是在页面渲染时,会重复循环。
原因:
v-for的优先级会高于v-if,因此v-if会重复运行在每个v-for中。
解决方案:
1、方案一:建议将 v-for 和 v-if 分开写,不要运用在同一个元素上。
<ul v-for="(item, index) in data" :key="index">
<li v-if="show"> 111 </li>
<li v-else> 222 </li>
</ul>
2、方案二:不要运用v-else ,对每一项都使用 v-if 进行判断
<ul>
<li v-for="(item, index) in data" :key="index" v-if="show"> 111 </li>
<li v-for="(item, index) in data" :key="index" v-if="hide"> 222 </li>
</ul>
更多推荐
已为社区贡献3条内容
所有评论(0)