不推荐 v-if 和 v-for 同时使用

不推荐 v-if 和 v-for 同时使用

v-for和v-if 同时写在一个标签会报错
因为v-for会比v-if的优先执行
实质是v-for优先执行，会创建对应的dom节点，如果v-if为false，会删除这个dom节点；这样创建后再删除，会造成页面卡顿，影响性能。

解决方法 
1. 在v-for之前创建元素使用v-if
	例如
    <div v-if="flag === ture">
       <div v-for="item in list" :key="item.id"></div>
    </div>
    
2. 通过templete 标签包裹 （假如用到循环的item属性）
	例如1：
	<h2>奇数</h2>
    <template v-for="num in nums">
      <i v-if="num % 2 !== 0" :key="num">{{ num }}</i>
    </template>
    <h2>偶数</h2>
    <template v-for="num in nums">
      <i v-if="num % 2 === 0" :key="num">{{ num }}</i>
    </template>
    
    例如2：
    <div v-for="num in nums" :key="num">
      <template v-if="num % 2 !== 0">
        <div>
          奇数 -- {{ num }}
        </div>
      </template>
      <template v-if="num % 2 === 0">
        <div>
          偶数 -- {{ num }}
        </div>
      </template>
    </div>
    
    PS： 循环template 模板标签不能绑定key值，可以在内部标签进行绑定。
    	 Vue3里面 v-if优先级大于v-for