vue中v-for和v-if不能同時使用的問題

vue中我們遍歷一個列表for循環是作用在dom節點上的，

我們在遍歷列表的時候可能需要進行判斷哪些顯示哪些隱藏

1、錯誤代碼如下，這樣寫的話，我們編輯器也會告訴你不能這樣寫

<ul>
    <li 
        v-for="user in users" 
        v-if="user.isActive" 
        :key="user.value"
         >
        {{user.label}}
    </li>
</ul>    

2、分析原因：當 Vue 處理指令時， v-if 比 v-for 具有更高的優先級，v-if無法訪問v-for里面變量

 

3、代碼修正

（1）使用空標簽 template，讓for循環在template上面；

<ul>
    <template v-for="user in users" >
        <li v-if="user.isActive" :key="user.value">
            {{user.label}}
        </li>
    </template>
</ul>

（2）使用compted先計算完屬性再去渲染模版

computed: {
    activeUsers: function () {
        return this.users.filter( (user)=> {
            return user.isActive;
        })
    }
}