v-if和v-for誰的優先級高？如何同時使用？

首先：永遠不要把 v-if 和 v-for 同時用在同一個元素上。

其次：當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級

1.過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾后的列表。

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


換成：

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

 

2.避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 。

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

更新為：

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