标签：一个 dshow 元素 color active use 避免 替换 计算属性
首先：永远不要把 v-if 和 v-for 同时用在同一个元素上。
其次：当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级
1.过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
将： <ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li> </ul>
换成：
<ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } }
2.避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 。
将: <ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} </li> </ul> 更新为： <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul>
标签：一个 dshow 元素 color active use 避免 替换 计算属性
原文地址：https://www.cnblogs.com/qlongbg/p/12100851.html
