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

Posted 2023-05-02

参考技术A 建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

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

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

Vue v-if and v-for

在vue中 永远不要把 v-if 和 v-for 同时用在同一个元素上。

我们可以将v-if 放到容器元素里

例如ol  ul 中去

li  里面放v-for  如下：

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