v-for 和 v-if 一同使用

永远不要把 v-if 和 v-for 同时用在同一个元素上。
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：

  1. <ul>
  2.   <li
  3.     v-for="user in users"
  4.     v-if="user.isActive"
  5.     :key="user.id"
  6.   >
  7.     {{ user.name }}
  8.   </li>
  9. </ul>

将会经过如下运算：

  1. this.users.map(function (user) {
  2.   if (user.isActive) {
  3.     return user.name
  4.   }
  5. })

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表，不论活跃用户是否发生了变化。
所以以下两种场景，我们可以做出如下处理：

  1. 为了过滤一个列表中的项目。

    1. <ul id="app">
    2. <li
    3.  v-for="user in users"
    4.  v-if="user.isActive"
    5.  :key="user.id"
    6. >
    7.  {{ user.name }}
    8. </li>
    9. </ul>
    1. const vm = new Vue({
    2. el: '#app',
    3. data: {
    4.  users: [
    5.    { name: 'shan', isActive: true, id: 1},
    6.    { name: 'jc', isActive: false, id: 2},
    7.    { name: 'cst', isActive: false, id: 3},
    8.    { name: 'deng', isActive: true, id: 4},
    9.  ]
    10. }
    11. })

    可以把上面的代码更新为：

    1. <!-- 通过原来的数组，得到一个新数组，渲染这个新的数组 -->
    2. <ul>
    3. <li
    4.  v-for="user in activeUsers"
    5.  :key="user.id"
    6. >
    7.  {{ user.name }}
    8. </li>
    9. </ul>
    1. const vm = new Vue({
    2. el: '#app',
    3. data: {
    4.  users: [
    5.    { name: 'shan', isActive: true, id: 1},
    6.    { name: 'jc', isActive: false, id: 2},
    7.    { name: 'cst', isActive: false, id: 3},
    8.    { name: 'deng', isActive: true, id: 4},
    9.  ],
    10.  activeUsers: []
    11. }
    12. })
    13. vm.activeUsers = vm.users.filter(user => user.isActive);

    这种方式仅为演示，在日后学习完计算属性后，要利用计算属性来做。

  2. 为了避免渲染本应该被隐藏的列表

    1. <ul>
    2. <li
    3.  v-for="user in users"
    4.  v-if="shouldShowUsers"
    5.  :key="user.id"
    6. >
    7.  {{ user.name }}
    8. </li>
    9. </ul>
    1. const vm = new Vue({
    2. el: '#app',
    3. data: {
    4.  users: [
    5.    { name: 'shan', isActive: true, id: 1},
    6.    { name: 'jc', isActive: false, id: 2},
    7.    { name: 'cst', isActive: false, id: 3},
    8.    { name: 'deng', isActive: true, id: 4},
    9.  ],
    10.  shouldShowUsers: false
    11. }
    12. })

    html部分可替换成为：

    1. <ul v-if="shouldShowUsers">
    2. <li
    3.  v-for="user in users"
    4.  :key="user.id"
    5. >
    6.  {{ user.name }}
    7. </li>
    8. </ul>

    将 v-if 置于外层元素上，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。