小墨の博客

问题记录时间：2023.10.16

整理博客时间：2023.10.25

问题描述

使用Vue版本：Vue2

v-for v-if 写在一个元素上的话，好像是会先执行 v-for 再执行 v-if

体现出来的问题就是如果v-for数组中的元素为空的话，那么这一项以及后面对应的v-else-if，v-else都会有这个问题

但是把 v-if 写在外层，v-for 写在内层就是正常的

解决方案

v-if v-for 两个逻辑分开写，不要写在同一个元素上

参考教程

Vue 在一个元素同时出现v-if 和 v-for 指令，谁优先级高？

https://blog.csdn.net/weixin_55464074/article/details/132636903

该教程关键观点：

Vue2 使用 v-for 优先，Vue3 发现问题了更改为 v-if 优先

Vue2 v-for 优先，为了保证什么情况都可以正常运行，性能不考虑才会出现这个情况。

Vue3 v-if 优先，应该是开发者为了防止我们同时使用两个指令产生性能问题，所以 v-if 优先判断。

该教程结论：

为了避免 v-if v-for 产生问题最标准的处理方法是两个指令分开写，先 v-if 还是先 v-for，这样逻辑就清晰好多。如果 v-if 是 v-for 的逻辑最好在数据源头处理掉，保持模板的逻辑干净易读，当数据产生变化时渲染函数不用再处理判断，提高性能。

vue：v-for与v-if作用于同一元素会产生什么后果

https://blog.csdn.net/EchoLiner/article/details/129842078

该教程结论：

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

张小弟之家