v-for v-if 同时使用？

v-if 与 v-for 的优先级对比

2.x 语法

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。

3.x 语法

3.x 版本中 v-if 总是优先于 v-for 生效。

由于语法上存在歧义，建议避免在同一元素上同时使用两者。

Vue2.x中一起使用

其实这样写也能够达到我们想要的渲染效果，但不推荐这么做，为什么呢？

因为这样的做法会渲染多余元素，在执行v-for时，isActive为false的元素也会被渲染，然后再根据v-if语法去隐藏。当数据量大时，这显然是个不好的做法。

建议如下做法：

<template>
  <div class="about">
    <ul>
      <li v-for="item in filterList" :key="item.num">
        {{item.num}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
   return{
      list:[
        {isActive:true,num:1},
        {isActive:false,num:2},
        {isActive:true,num:3},
        {isActive:false,num:4},
        {isActive:true,num:5},
        ]
   }
  },
  computed:{
    filterList(){
      return this.list.filter((item)=>{
        return item.isActive===true
      })
    }
  }
}
</script>
复制代码

Vue3.x中一起使用

<template>
  <div class="hello">
    <ul>
      <li v-for="item in list" :key="item.num" v-if="item.isActive">
        {{item.num}}
      </li>
    </ul>
  </div>
</template>

// 无法正常渲染：Property "item" was accessed during render but is not defined on instance. 
因为当它们处于同一节点，`v-if` 的优先级比 `v-for` 更高，这意味着 `v-if` 将没有权限访问 `v-for` 里的变量；
复制代码

可以这样做：

<template>
  <div>
    <ul>
      <template v-for="item in list" >
        <li v-if="item.isActive" :key="item.num">
          {{item.num}}
        </li>
      </template>
    </ul>
  </div>
</template>
//将v-for提升一层
复制代码

但是还是推荐使用计算属性进行过滤，更优雅，没有语义化错误。

总结

比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。