vue中v-for和v-if不能同时使用的坑

风格指南：https://cn.vuejs.org/v2/style-guide/

v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。

• 原因：v-for比v-if优先级高，所以嵌套使用的的话，每次v-for都会执行v-if，造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。

    <ul>
      <li v-for="user in users" v-if="user.isActive" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  

如上情况，即使100个user中之需要使用一个数据，也会循环整个数组。

• 正确：

  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>