v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,将会影响速度,尤其是当之需要渲染很小一部分的时候,所以不推荐v-ifv-for同时使用

  1. 如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上
<template v-if="ok">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</template>
  1. 替换成computed属性
<li v-for="todo in todosIsComplete">
  {{ todo }}
</li>
computed: {
  todosIsComplete: function () {
    return this.todos.filter(todo =>todo.isComplete)
  }
}

Logo

前往低代码交流专区

更多推荐