vue2 和 vue3 中 v-if 和 v-for 优先级的区别

398 阅读1分钟

vue2

vue2中,当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

vue2相关文档


vue3

vue3中,当 v-if 与 v-for同时存在于一个节点上时,v-if 比 v-for 的优先级更高。注意此处与vue2中是相反的。

image.png vue3英文文档 vue3中文文档


不推荐一起使用

无论2中还是3中,都不推荐一起使用 v-if 与 v-for


推荐用法

vue3文档中推荐写法如下。 在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读):

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>