Vue中v-if和v-for为何不能连用？【Vue面试题】

首先呢说明一下这个问题Vue中v-if和v-for为何不能连用,不是说操作不允许而是这样操作会造成性能浪费。

    <div v-for="(item,index) in itemList" v-if="condition"></div>

以上代码的目的是判断condition条件成立时对itemList做循环，但是在Vue处理时，v-for的优先级高于v-if，所以不管你condition是否成立，v-for都会做循环,所以是达不到先判断再循环的作用.

嵌套使用

如果下那个实现先判断再循环效果的话，可以嵌套使用他俩：

     <template v-if="condition">
          <div v-for="(item, index) in itemList"></div>
     </template>

或者对循环结果做筛选：

    <div v-for="(item, index) in itemList">
        <template v-if="condition1">
            <div ></div>
        </template>
        <template v-else="condition2">
           <div ></div>
        </template>
    </div>