Vue中v-if和v-for为何不能连用

Vue中v-if和v-for为何不能连用？

<div v-for="(item, index) in list" :key="index" v-if="flag">
{{ item }}
</div>

原因分析

v-for 会比 v-if优先执行，当一个标签上面同时存在：v-for 和 v-if 的时候，会先执行v-for循环，

然后去看循环出来的每个div上面flag的值，是真还是假。如果flag为true，就显示 ，否则就不显示

这样就造成了不必要的性能浪费

解决方案

v-for 和 v-if 嵌套使用是可以的

<template>    
	<div v-for="(item, index) in list" :key="index">
      <template v-if="index % 2"> 奇数- {{ item }} </template>
      <template v-else> 偶数- {{ item }} </template>
    </div>
</template>
<script type="text/javascript">
	export default {
     data () {
        return {
          list: ['Vue', 'React', 'Angular'],
          flag: true
        }
      },
    }
</script>

页面效果

偶数- Vue
奇数- React
偶数- Angular