vue中v-if和v-for指令最好不要同時使用

建議不要在與v-for相同的元素上使用v-if。因為v-for指令的優先級高於v-if當它們處於同一節點。v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重復運行於每個 v-for 循環中。

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

將if指令添加到父級元素上，這可以避免對每個列表項進行條件判斷。

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

如果需要在列表中過濾掉不需要的某一項，建議使用計算屬性。

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>