【VUE】v-if和v-for的优先级

作者：System 时间：2024年08月25日分类：所有,vue.js 字数：385

这篇文章距离上次修改已过431天，其中的内容可能已经有所变动。

在Vue中，v-if和v-for指令的优先级不同，v-for比v-if具有更高的优先级，这意味着它们会先进行v-for循环，然后再进行条件判断。

如果你想要在循环中只显示满足条件的项，你可以将v-if放在内部模板上，例如：




<ul>
  <li v-for="item in items" v-if="item.isActive">
    {{ item.name }}
  </li>
</ul>

在这个例子中，只有items数组中isActive属性为true的项才会被显示。

如果你尝试改变它们的执行顺序，比如先执行条件判断再循环，你可能会遇到问题，因为这违反了Vue的设计原则。Vue的目标是提供响应式的数据驱动的组件，在模板中保持简洁性和执行优先级。