Vue中v-if和v-for的一起使用时的几种处理方式

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

template

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

计算属性(推荐使用)

<template>
 <div>
    <div v-for="(user,index) in activeUsers" :key="user.index" >
        {{ user.name }} 
    </div>
</div>
</template>
<script>
export default {
  name:'A',
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: {//通过计算属性过滤掉列表中不需要显示的项目
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isShow;//返回isShow=true的项，添加到activeUsers数组
      })
    }
  }
};
</script>

 

• 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。
• 在 vue 3.x 中，v-if 总是优先于 v-for 生效。

1、选择性地渲染列表，例如根据某个特定属性来决定是否渲染，使用计算属性computed：

    <div v-for="item in inHouseList" v-if="item.is_expired === 1">{{item.bar_code}}</div>

computed: {
    activeinHouseList: function() {
        return this.inHouseList.filter((item) => {
            return item.is_expired === 1 
        })
    }
}

<div v-for="item in activeinHouseList">{{item.bar_code}}</div>

2、 避免渲染本该隐藏的列表项，将v-if放到循环列表元素的父元素中或使用template将v-for渲染的元素包起来，再在template上使用v-if。

<div v-for="item in inHouseList" v-if="isExpired === 1 ">{{item.bar_code}}</div>

<template v-if="isExpired === 1">
    <div v-for="item in inHouseList"></div>
</template>

总结：

• vue2.x 中v-for优先级高于v-if，vue3.x 相反
• 尽量避免在同一个元素上面同时使用v-if和v-for，建议使用计算属性替代