建议不要在与v-for
相同的元素上使用v-if
。因为v-for
指令的优先级高于v-if
当它们处于同一节点。v-for
的优先级比 v-if
更高,这意味着 v-if
将分别重复运行于每个 v-for
循环中。
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
<li>
</ul>
如果需要在列表中过滤掉不需要的某一项,建议使用计算属性。
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
...... //
...... //
<ul>
<li
v-for="user in activeUsers"
:key="user.id">
{{ user.name }}
<li>
</ul>
将if
指令添加到父级元素上,这可以避免对每个列表项进行条件判断。
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
<li>
</ul>
网友评论