v-for和v-if同时使用的解决方法

永远不要把 v-if 和 v-for 同时用在同一个元素上。

在下面代码中可以实现对列表的条件渲染，但是v-for和v-if不推荐同时使用， 因为当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中

<ul>
    <li v-for='user in users' :key="user.id" v-if="user.isActive">{{item.name}}</li>
</ul>

常用的解决方法：

1. 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。 在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

<ul>
    <li v-for='user in activeUsers'>{{user.name}}</li>
</ul>
<script>
    data() {
        return {
            users:[
                {id:1,name:"张三",isActive:true},
                {id:2,name:"李四",isActive:true},
                {id:3,name:"王麻子",isActive:false}
            ],
        }
    },
    computed:{
        activeUsers: function () {
            return this.users.filter(function (user) {
                return user.isActive
            })
        }
    }
</script>

2. 使用<template></template>，此方法类似于 v-if，你也可以利用带有 v-for 的<template>来循环渲染一段包含多个元素的内容。比如：

<ul>
    <template v-for='user in users'>
        <li v-if='user.isActive'>{{user.name}}</li>
    </template>
</ul>