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>