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>