v-if 和 v-for 一起使用

在 vue 2.x 中， 在一個元素上同時使用 v-if 和 v-for 時， v-for 會優先作用。

在 vue 3.x 中， v-if總是優先於 v-for 生效

 

1、慣性使用，但 vue 2.x 中，不建議 v-for 和 v-if 使用

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

 

2、使用計算屬性 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 
        })
    }
}

 

3、避免渲染本該隱藏的列表項，將 v-if 放到循環列表元素的父元素中或使用template將 v-for 渲染的元素包起來，再在 template 上使用v-if

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