遇到的问题是:

  前端获取的数据是正确的,渲染传参也是正确的。但是在页面展示时却出现了重复渲染。代码如下:

<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>

 

Logo

前往低代码交流专区

更多推荐