对vue2.0的v-for和v-if冲突问题一些见解

已于 2022-06-24 15:07:12 修改
阅读量1k 收藏
点赞数
文章标签： 前端 javascript html vue vue.js
于 2022-02-08 17:28:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44273451/article/details/122827709
版权
本文探讨了Vue2和Vue3中v-for与v-if指令的执行优先级差异。在Vue2中，v-for优先于v-if执行导致可能的渲染冲突，而在Vue3中这一顺序被反转，先执行v-if再执行v-for，从而避免了问题。为了解决Vue2中的冲突，建议使用计算属性或在v-for内部嵌套v-if进行逻辑处理。
摘要由CSDN通过智能技术生成

v-for和v-if
之前看过有一种关于v-for和v-if之所以产生冲突的解释，我觉得是比较合理的说法，这里记录一下。
vue2里，同一个标签内v-for的执行优先级比v-if高，也就是说先执行循环渲染生成了这些dom元素，然后此时再去执行v-if的判断条件想定义dom的渲染，在这里冲突就出现了，dom已经生成，再想去销毁，那dom元素人家就不乐意了，不让你v-if说了算，不能你说出现就出现，你说消失就消失，于是视图渲染不更新，产生了报错。
vue3底层将v-if和v-for的执行优先级与vue2反其道行之，先执行渲染判断再执行循环，所以解决了这个问题。
如果原来vue2有需求是希望for循环和判断并存的话，我的建议是使用computed创建一个计算属性做filter过滤新数组或者在属性v-for的那个标签里面再套一层标签，里面那个子标签加上v-if做判断就好了。
个人拙见，欢迎指出不足。

与夏柔风
关注
vue2.0使用v-for循环制作多级嵌套菜单栏
12-29
<div class=level-one v-if=obj.level v-for=obj><a>{{obj.title}} <div class=level-two v-if=obj1.parentId v-for=obj1><a>{{obj1.title}} <div class=level-three v-if=obj2.parentId == obj1.id v-fo
vue-video-player:vue2.0+vue-video-player实现hls播放全过程
04-28
Vue VUE，这是VUE 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
vue2，Vue3中v-for，v-if区别
m0_59942107的博客
04-12 764
这是因为Vue 3引入了一项优化，即在编译阶段会根据v-if的条件进行静态分析，如果条件为假，则不会生成对应的虚拟节点，从而减少了不必要的渲染开销。在Vue 2中，v-for和v-if的指令可以同时使用在同一个元素上，它们的执行顺序是这样的：先执行v-for的循环，然后在每次循环中进行v-if的条件判断。在Vue 3中，如果需要对v-for的循环结果进行条件过滤，可以将v-if指令放在包裹的元素上，或者使用计算属性来筛选出符合条件的数据。
Vue2中v-for 与 v-if 的优先级
有我更精彩的博客
02-08 979
在Vue2中，v-for 和 v-if 是常用的指令，它们在前端开发中非常有用。但是，当我们在同一个元素上同时使用这两个指令时，就需要注意它们的优先级关系了。
Vue中v-for和v-if优先级（2、3）
最新发布
lplovewjm的博客
07-09 324
因为这种风格上的差异，所以尽量不要在一个子节点同时使用v-for和v-if。
vue中v-if和v-for同时使用的问题
yzhean的博客
11-15 9811
在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} ...
Vue基础（2）——v-for，v-if 语法
WannaRunning的博客
03-24 1333
v-for即for循环 如果遍历的对象是数组，表达式的格式为：（T，index） inList<T>，其中T是对象类型；如果遍历的目标是对象，表达式的格式为：（v,k,i）in T ,其中v是键的值，k是键，i是索引，T是对象 v-if表示判断 当表达式为true是展示标签内容，false时不展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
Vue2 如何优雅的解决v-for和v-if同时出现
云间月
08-03 1489
本文通过伪代码的形式，介绍了Vue 2项目中解决v-for和v-if冲突的两种方案，具体使用何种方法需要视业务需求和数据结构而定。
v-contextmenu：on基于Vue 2.0的ContextMenu
02-06
适用于Vue 2.0的ContextMenu组件。 中文| 安装 CDN约会 可通过获取最新版本的资源，在页面中追加相应的js和css文件即可。 <!-- 引入 Vue --> < script src =" https://unpkg.com/vue/dist/vue.js " > &...
浅谈Vue2.0中v-for迭代语法的变化(key、index)
08-27
在Vue2.0中，`v-for`指令的迭代语法相比Vue1.x做了一些重要的调整，这些变化影响了如何在循环中处理数组和对象。本文将深入探讨这些变化，特别是涉及`key`和`index`的用法。 首先，让我们回顾一下Vue1.x中的`v-for`...
vue2.0-vuex2.0-demo-jianshu
03-28
vue2.0-demo-jianshu 用Vue2.0全家桶建造的简书网站，这是一个前连通到的整体网站，包括了数据库配置。前端采用Vue2.0，服务端采用Express框架 构建设置 # install dependencies npm install # serve with hot ...
vue中的v-if与v-for
qq_51976882的博客
02-08 583
官方不推荐v-for和v-if同时使用，或同时作用在同一个Dom元素，因为两者的优先级不同，会带来性能上的消耗。vue2中v-for的优先级大于v-if，vue3中则相反。
vue2.0(v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？)
努力中的小曾
08-17 406
直接上代码了 <template> <div> <h1>v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？</h1> <!-- 测试1 --> <div v-if="isShow"> <p v-for="(item,index) in arr" :key="index">{{item.name}}</p>
Vue2 v-if 和 v-for不建议一起使用
sunshineTing2的博客
10-26 766
在Vue2中，v-for的优先级是高于v-if，同时使用的话，每次循环都会遍历整个列表，造成资源浪费。所以实践中不应该把v-for和v-if放一起使用。：使用计算属性过滤列表数据。
vue2 v-if和v-for不一起使用的方法
GuAng
01-13 369
避免在v-for中使用v-if 一个超常见的错误是使用v-if来过滤v-for循环的数据。 <ul> <li v-for='product in products' :key='product.id' v-if='product.isShow' > {{ product.name }} </li> </ul> 上述的代码虽然看上去直观明了，但这会导致一个巨大的性能问题 Vue中的v-for优先于v-i
vue2中v-if与v-for如何合理地同时使用
mqq2502513332的博客
08-30 1277
如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。
用自己的踩坑经历告诉你 vue2/vue3中v-if和v-for是否能一起使用
weixin_45966674的博客
10-09 695
简单说 第一个元素 因为v-for遍历的是0 因此没有走循环 自然就没有渲染 从而没有触发v-if 相当于元素就没写一样 而第二个是因为 没有v-if判断过啊 就好比 没有if 哪来的else呢？而这个index是v-for中声明的 那就是说 v-for没执行 就没有index 而我们v-if 在先执行的情况下去拿这个index判断 自然是拿不到就报错了。vue3中 v-if和v-for的优先级发生了转换 这次是v-for优先级低于v-if了。
Vue2学习计划五：v-on、v-model、v-if、v-for和v-show
ynztwlz的博客
08-06 1677
v-on事件监听 1.1 v-on基本使用 我们前面学习了，{{}}和v-bind，这两货可以让我们将Vue实例中的数据绑定到DOM中。那么，产品经理又开始有奇怪的需求了，比如我们要点击按钮更换图片怎么办？怎么办呢？我们目前只会将数据绑定到DOM上，如何监听DOM里的事件，然后作用到Vue实例数据上呢？别急，这正是今天要学的v-on的主场。 产品经理太可恶，我们实现一个其他的事件监听案例，实现一个计数器。有按钮加和按钮减，然后将数值展示出来。 <div id="app"> <h
vue2.0v-if的用法
07-27
v-if是Vue.js中的一个条件渲染指令，用于根据条件来决定是否渲染某个元素或组件。它的用法是将v-if指令添加到一个元素上，并将其值设置为一个布尔表达式。当布尔表达式的值为true时，该元素会被渲染出来；当布尔表达式的值为false时，该元素会被从DOM中移除。\[1\] 在Vue.js 2.0中，v-if指令可以与v-else-if和v-else指令一起使用，用于实现多个条件的判断。v-else-if指令用于在前一个条件不满足时判断下一个条件，v-else指令用于在前面的条件都不满足时渲染一个默认的元素或组件。\[2\] 另外，v-if和v-for指令可以同时使用，但是需要注意的是，v-for的优先级比v-if高。也就是说，当v-if和v-for同时存在于同一个元素上时，v-for会先被解析，然后再根据v-if的条件来决定是否渲染该元素。\[3\] 如果想要将v-for和v-if置于不同的标签上，可以使用template标签来包裹它们。template标签是一个占位符元素，不会在最终的渲染结果中显示出来，但可以用来包裹多个元素或组件。\[3\] 总结起来，v-if是Vue.js中的条件渲染指令，用于根据条件来决定是否渲染某个元素或组件。它可以与v-else-if和v-else指令一起使用，用于实现多个条件的判断。在使用v-if和v-for时，需要注意v-for的优先级比v-if高。如果想要将v-for和v-if置于不同的标签上，可以使用template标签来包裹它们。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [在vue中v-if和v-for的优先级](https://blog.csdn.net/weixin_47450807/article/details/125151173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue 2.0——v-if 使用](https://blog.csdn.net/qq_38322527/article/details/125497488)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值