vue中v-for和v-if组合使用问题解决方案
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,将会影响速度,尤其是当之需要渲染很小一部分的时候,所以不推荐v-if和v-for同时使用如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上<template v-if="ok"&g
·
当 v-if
与 v-for
一起使用时,v-for
具有比 v-if
更高的优先级,这意味着 v-if
将分别重复运行于每个 v-for
循环中,将会影响速度,尤其是当之需要渲染很小一部分的时候,所以不推荐v-if
和v-for
同时使用
- 如果你的目的是有条件地跳过循环的执行,那么可以将
v-if
置于外层元素 (或<template>
)上
<template v-if="ok">
<li v-for="todo in todos">
{{ todo }}
</li>
</template>
- 替换成computed属性
<li v-for="todo in todosIsComplete">
{{ todo }}
</li>
computed: {
todosIsComplete: function () {
return this.todos.filter(todo =>todo.isComplete)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)