vue踩坑系列-v-for和v-if的重复循环

遇到的问题是：

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

    
 111 
    
 222 

    但是在页面渲染时，会重复循环。

原因：

     v-for的优先级会高于v-if，因此v-if会重复运行在每个v-for中。

解决方案：

    1、方案一：建议将 v-for 和 v-if 分开写，不要运用在同一个元素上。

    
 111 
    
 222 

   2、方案二：不要运用v-else ，对每一项都使用 v-if 进行判断

    
 111 
    
 222