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;
        })
    }
}