小墨の博客

梦想需要付诸行动,否则只能是梦

Vue2 v-for v-if 写在一个元素上的BUG

问题记录时间: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 同时用在同一个元素上。


张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:511
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:231783

    | | |
    | |  Z-Blog PHP