vue中v-for和v-if组合使用问题解决方案

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

1. 如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上

<template v-if="ok">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</template>

2. 替换成computed属性

<li v-for="todo in todosIsComplete">
  {{ todo }}
</li>

computed: {
  todosIsComplete: function () {
    return this.todos.filter(todo =>todo.isComplete)
  }
}