1. 程式人生 > >vue的注意規範之v-if 與 v-for 一起使用

vue的注意規範之v-if 與 v-for 一起使用

1、v-if 與 v-for 一起使用

當 v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優先順序,這意味著 v-if 將分別重複運行於每個 v-for 迴圈中

所以,不推薦v-if和v-for同時使用

使用推薦方式:

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
<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>