vue指令v-for和v-if为什么不能同时使用

指令v-for和v-if不建议同时使用
在vue2.x中，v-for优先级是高于v-if的，如果在同一个元素中使用了v-for和v-if，那么在渲染时，v-for的每一项都要重复运行v-if，这会降低渲染的效率

解决方式
可以将v-if的功能替换为 在一个计算属性上面遍历后使用

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>