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，建議使用計算屬性替代