v-if和v-for谁的优先级更高

1.两个指令不可以用在同一个元素身上

1.1vue2:v-for的优先级比v-if高,每次循环都会去执行一次v-if,

1.2vue3:v-if的优先级高于v-for,

2.案例

<p  v-for="item in list"   v-if="status">
      <span>{{item.name}}</span>
</p>
<p  v-for="item in list"   v-else >
     <span>{{item.name}}</span>
</p>

当你改变status=false时，是不是觉得应该只显示第二个p的内容，但实际上第一个内容也显示了。这就是当v-if和v-for 在同一个标签内一同使用时，v-for的优先级高的原因。此时，解决的方法就是在p外面再套一层div标签，在div上使用v-if即可

详细链接:https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html