使用vue的v-for与v-if遇到的一个问题

最新推荐文章于 2024-03-09 10:31:32 发布
最新推荐文章于 2024-03-09 10:31:32 发布
阅读量1.4w 收藏 3
点赞数 1
分类专栏： 感悟 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24122593/article/details/70265562
版权

今天周四，在进行项目时，就发现一个问题，自己想要使用v-if有时常常得不到自己预期的效果。那么就苦苦钻研了一下。并且也从官网上看到，它们两个确实是存在优先级的。

官网上的解释是这样说的，

推荐的解决方法是加入<template>，但是在自己写的项目中，v-for始终是在最外面，所以渲染的时候是没有效果的。

正在考虑换个方法，实现功能。绑定不合理，需要拆组件啦！！！！

CURRY_zhao
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目性能优化（汇总）
Jermyo的博客
01-16 2172
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。 一、基础优化（代码以及编码规范） 1、v-if 和 v-sh......
Vue循环渲染 v-for和v-if，key
看见小狮子没
08-30 455
效果图常规的方法会引起一个问题：v-if每次判断成功时都会 再创建一个div来装得到的数据，相当于我们用了两个div来装为了解决这一问题我们可以使用冰元素这样我们就可以解决这一问题。
在Vue开发中v-if指令和v-show指令的使用介绍，v-if和v-for的优先级以及使用注意事项的介绍
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-09 1195
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。用来按条件显示一个元素的指令是 v-show。其用法基本一样：v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染，为true是渲染（dom存在），为false时不存在（dom不存在）
结合源码，谈谈v-for和v-if谁的优先级高？应该如何正确使用避免性能问题?
见贤思齐
04-02 950
对应源码的位置compiler/codegen/index.js 1.测试的案例代码 <body> <div id="demo"> <p v-for="child in children" v-if="isFolder">{{child.title}}</p> <!-- <template v-if="isFold...
v-if和v-for优先级 及使用注意项
Xiaoyinghuan的博客
04-19 290
今天让我们来复盘一下v-if 和v-for v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化 v-for优先级是比v-if高 永远不要把 v-if 和 v-for
v-for/v-if使用时的注意点
m0_61696809的博客
03-05 242
例如，如果您在循环中使用v-if来控制显示某些元素，则每次渲染时都会重新计算该条件。与此相反，如果您使用计算属性进行过滤，则只有当数据改变时才会重新计算。当在循环中出现条件时，使用计算属性进行一次过滤是一种有效的方法来缓解问题。这是因为计算属性是在数据改变时自动更新的，而不是在每次渲染时都重新计算。因为v-for的优先级比v-if高，如果放在一起用，也是先执行循环渲染一遍，之后在去v-if判断。这样的写法会导致每个 li 元素都需要进行判断和循环，可能会增加处理量，降低性能。这样就存在性能问题。
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
解决vue的 v-for 循环中图片加载路径问题
10-18
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue v-for 使用问题整理小结
10-16
使用v-for指令的时候遇到一个错误问题，具体错误代码在文章给大家列出，对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
关于vue中v-for与v-if优先级的问题看法
weixin_63929524的博客
04-06 187
在 Vue2 中，v-if 优先级高于 v-for，因此使用时需要注意元素的渲染顺序。而在 Vue3 中，v-for 优先级高于 v-if，更符合直觉。在Vue2中，v-if 的优先级高于 v-for。这意味着，在一个带有 v-for 和 v-if 的元素上，每个循环中的元素都会首先被计算其是否应该渲染，然后再进行循环渲染。在Vue3中，v-for 的优先级高于 v-if。这意味着，如果在一个带有 v-for 和 v-if 的元素上，先进行循环渲染，然后再根据条件决定是否显示该元素。
vue项目性能优化-总结
欢迎来到我的博客
04-30 781
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、 Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化， 使项目具有更高效的性能、更好的用户体验。 一、基础优化（代码以及编码规范） 1...
v-if和v-for的优先级
qq_42451776的博客
08-06 4082
v-for优先级比v-if高 v-for与v-if作用在不同标签时候，是先进行判断，再进行列表的渲染 注意事项 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断） 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环 <template v-if="isShow"> <p v-for="item in items"> </.
vue中v-if和v-for的区别是什么
忧郁的蛋的专栏
12-27 4752
v-if和v-for的区别：1、作用不同，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true值的时候被渲染；而v-for指令基于一个数组来渲染一个列表。2、优先级不同，v-for优先级比v-if高，在进行if判断的时候v-for是比v-if先进行判断的。首先在官方文档中明确指出v-for和v-if不建议一起使用。
Vue组件
qq_40131290的博客
10-31 150
组件的概念 组件是一个html 、 css 、js 、img 等的一个聚合体 组件的作用 为了将来项目的维护、更新变得更简单 代码的复用 组件的拓展 通过Vue.extend()来拓展的 ƒ Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and shoul...
vue中v-if和v-for能用在同一个标签吗-NO
JackieDYH的博客
09-15 3320
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中 所以，不推荐v-if和v-for同时使用 一、不应同时使用 v-for和v-if不应该一起使用。 原因：v-for比v-if优先，即每一次都需要遍历整个数组，影响速度。 例如重构项目的时候遇到的旧代码： <div v-for="(fileMsg,index) in fileMsgList" :key="fileMsg.id" v-...
v-for 和 v-if 的优先级
LittlePoem的博客
08-16 2147
在vue2中 v-for 的优先级更高，如果同时出现在同级每次渲染都会先执行循环再判断条件，由此可见对性能损耗比较大，可使用计算属性先筛选需要的数据 在vue3中 v-if 的优先级更高，因为 v-if 优先级高了，这意味着 v-if 将没有权限访问 v-for 里的变量，抛出错误 兼容性问题详见：vue官网描述 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值