理解vue中if和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>

如果需要在列表中过滤掉不需要的某一项，建议使用计算属性。

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>

将​​if​​指令添加到父级元素上，这可以避免对每个列表项进行条件判断。

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