vue踩坑系列-v-for和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-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>