Vue中v-if和v-show与display:none和visibility: hidden的区别

最新推荐文章于 2024-03-18 14:45:49 发布
最新推荐文章于 2024-03-18 14:45:49 发布
阅读量3.6k 收藏 4
点赞数 1
分类专栏： vue 前端 文章标签： vue js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51406830/article/details/116196090
版权

Vue v-if v-show 性能优化 条件渲染
关键词由CSDN通过智能技术生成
vue 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
前端
18 篇文章 0 订阅
订阅专栏

1.v-if和v-show以及display:none都是网页中不占任何的位置。
visibility: hidden;只是单纯的隐藏元素，占据位置
2.v-if设置为false的时候在控制台状态如下图是注释状态没有实际渲染
在这里插入图片描述
所以如果使用频繁就使用v-show 因为原理是切换css的display none 所以切换消耗比较低但是初始化会渲染
因为v-if的切换需要从新渲染代价过大 如果是不频繁就使用v-if 因为初始化如果为false的化不会渲染

刘逃
关注
专栏目录
【VUE】v-if 和 v-show 大详解(多角度分析+面试简答版)
代码的魅力，根本走不出来
01-26 302
v-if与v-show都能控制dom元素在页面的显示v-if相比v-show开销更大的（直接操作dom节点增加与删除）如果需要非常频繁地切换，则使用v-show较好如果在运行时条件很少改变，则使用v-if较好。
v-if&&v-for&&v-show
偷只猫来养的博客
08-19 1519
v-if&&v-for&&v-show （1）v-if：通过删除和添加节点来显示页隐藏节点，是直接操作DOM的指令，当频繁切换节点时，会频繁的造成重排和重绘，导致效率降低，不建议使用它；而在操作节点不频繁的情况，比如说系统权限问题时，比较适合使用v-if，使用的语法如下： <div @click="change"> <button type="button">第一个</button> <button type="button"&g
Vue中visibility display v-if v-show比较
weixin_44080648的博客
10-13 4045
display: none 给一个元素设置了display: none后，该元素及其后代元素均会被隐藏。且重写后代元素的display属性无效。 该元素及其后代元素均不占用原空间，隐藏后的元素无法点击。 visibility:hidden 给元素设置visibility: hidden后，该元素隐藏。其子元素默认继承父元素visibility属性，但子元素若重写属性，则不受父级影响。 该元素隐藏后，仍保持占位。隐藏部分无法点击，可见的子元素可以点击。 display: none和visibility
Vue | 显示切换（v-if与v-show,display,visibility与opacity）
热门推荐
MGsniper的博客
01-16 3万+
在Vue中，实现显示切换，有以下几种手段： 1. 使用v-if指令 2. 使用v-show指令 3. 动态绑定display 4. 动态绑定visibility 5. 动态绑定opacity
v-show和v-if以及visibility：hidden的区别
sweet_12312的博客
02-10 1333
1.v-show 隐藏时，就是在某个DOM节点的样式上，加上 display:none，把他隐藏之后，他不会在页面中占据位置，其余的节点会走到这个节点上去。但是打开f12是可以找到它的，无法操作DOM节点 他会引起重排重绘 2.v-if 隐藏时，添加v-if之后，打开f12，不可以找到这个DOM元素，直接被抹除的，他也不会在页面中占据位置。无法操作DOM节点 他会重新把整个页面再次加载 3.visibility：hidden 这是css的属性，当你使用他隐藏某个节点时，他也可...
vue中tab隐藏display:none（v-show无效，v-if有效）
luemeon的博客
07-28 1464
编译前和运行时标签不同。
v-if和v-show、display: none和visibility：hidden的区别
a378113472的博客
06-17 555
v-if指令和v-show指令的区别 相同点：都可以控制标签的显隐。 不同点： 一、实现本质方法区别 v-if是动态的向DOM树内添加或者删除DOM元素 v-show本质是利用标签的display属性，通过visibility和none控制显隐 v-if="false"在DOM不能获取到该标签 v-show=false在DOM中仍能获取到该标签 二、编译的区别 v-show其实是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁的重建内部的事件监听和子组件 三、编译的条件 v-sho
V-if与display:none的区别 （v-if v-show display:none visibility:hidden 辨析）
龙丨行的博客
04-02 3107
前言：网上有很多相似的内容，为啥我还再写一篇？因为那些文章千篇一律都说的是 v-if 与 v-show， display:none 与 visibility:hidden各自的关系，而对于v-if与display,v-show与display的关系说得不是很清楚，所以写下这篇小记。 v-if ：让Dom 节点直接消失。 v-show： 调用display:none 来控制元素是否展示。 display:none --> 物理空间消失，但是dom还在。（即：视觉上看不到，也没有位置，但是dom节点还在
对vue中v-if的常见使用方法详解
10-17
`v-if` 提供了比使用CSS `display:none` 或 `visibility:hidden` 更好的性能优化，因为它会确保在条件为假时完全不编译和渲染相关元素。这对于处理大量数据或复杂逻辑的条件渲染尤其有用。 6. **与`v-show`的区别*...
Element的dialog使用的是v-show来控制显示与隐藏
我爱美女S的博客
12-29 2915
题外话：今天面试有被问到，我之前开发中使用dialog碰到过有缓存清不掉，百度看别人说使用v-if可以清除。后来用别的语句清除了。今天我直接答了v-if。 正文 我在安装的依赖包中查看了dialog源码，Element的dialog使用的是v-show来控制显示与隐藏。 body已经使用了v-if。所以再给什么body里的textarea添加v-if来清缓存，是没有用的。组件中的结构类名与控制台中的一一对应，如下图。 在网页中，打开控制台，可以看到是使用了display:none来控制dialog的显示与
VUE通过添加或删除“display：none”属性实现显示切换
withkai44的博客
03-24 3097
<template> <div class="hello"> <div class="top">3楼</div> <div class="middle" :style="display"> <div class="bedroom room">2楼卧室</div> <div class="bathroom room">2楼洗手间</div> </
vue的v-if隐藏不了元素失效问题，因为display:none； 失效，所以元素还显示
陈新科的博客
08-02 3833
1.开始隐藏echarts的图表没隐藏掉 <divclass="tableonejjtp" v-if="dasdasadsa1"> //中间是多个echart可视化的div </div> 2.后来在网上找了好多方案也没解决掉，最后直接在外层套个div设置if隐藏，简单直接！ <divv-if="dasdasadsa1"> <divclass="tableonejjtp"> //中...
[css3] 关于隐藏元素 display:none 和 visibility:hidden
我是z先生
08-13 679
大家都知道，写css的时候，隐藏一个元素可以通过display属性设置为"none"，或visibility属性设置为"hidden" 去隐藏元素。 但是注意，这两种方法会有着区别。 visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none 可以隐藏某个元素，且隐藏的元素不会占用...
Vue中v-if、v-show、display：none和visibility：hidden的区别
zzzz121380的博客
10-28 5889
Vue中v-if和v-show与display:none和visibility: hidden的区别 1、v-if="false"和v-show="false"以及display:none都是网页中不占任何的位置。 v-show="false"相当于display:none; 2、visibility: hidden;只是单纯的隐藏元素，占据位置 3、v-if="false"的时候在控制台状态是注释状态没有实际渲染 v-show与 v-if 比较 v-show 指令的功能与 v-if 指令相似。不过 v-i
v-show和v-if的区别 display:none和visible: hidden的区别
qq_43944285的博客
05-09 1251
星空旅行者曦橙紫皮 2:53:23 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素 星空旅行者曦橙紫皮 2:53:42 display:none是不为隐藏的对象保留其物理空间，俗称看不见也摸不着； visible: hidden是为隐藏的对象保留其物理空间的，俗称看不见但摸得着。 ...
vue指令 --- vue-observe-visibility
炯炯灯的博客
05-13 2901
一个很方便的loader----vue-observe-visibility 应用场景一： 代替position: sticky, 这个属性简单来说 可以用来让元素在未超出屏幕高度时保持relative，超出屏幕高度时呈现position: fixed的效果。可以用于实现一些很常见的需求。但是这个属性目前只有chrome支持的比较好，兼容性不是很好，所以需要替代方案-----vue-obse...
display none的元素重新展示如何撑开页面_Vue实战081：多HTML标签元素如何实现并排显示详解...
weixin_39617473的博客
11-29 212
在前端对多个相同的标签元素进行有序的排列是非常常见的需求，当我们有多个相似功能出现在同一个区域时我们就需要合理的排列这些元素。比如我这里的云服务提供了多个功能模块展示给用户，这个时候我们就会将每个模块所涉及到的内容打包成一个整体来设计。HTML元素构建在Vue相似的功能展现我们可以通过v-for来实现，modulars中的数据我们口可以通过登录直接从后台获取。这样不管有多少个模块我们都可以快速的实...
Vue display讲解
最新发布
还在活水泥的未来包工头
03-18 1066
display 是 CSS 中的一个属性，用于设置元素的显示方式。
Vue 内置指令
Kofe_Chen的博客
11-29 224
基本指令 v-cloak 在 vue 实例编译结束之后再渲染，一般与 display: none 结合使用。 <div id="app"> <div v-cloak>{{msg}}</div> </div> // css [v-cloak]: { display: none; } 解决初始化慢导致的页面闪动，比如：页面加载出来了但是没有解...
v-if 和 :if
07-28
回答: v-if和:if是Vue.js中用于条件渲染的指令。它们的作用是根据条件来决定是否渲染某个组件或元素。v-if是Vue.js的内置指令，而:if是v-bind的简写形式，用于动态绑定一个属性。\[1\] 在给定的代码示例中，使用了v-if指令来根据flag的值来切换显示不同的组件。当flag为true时，显示myCom1组件，当flag为false时，显示myCom2组件。\[2\] 此外，还可以结合动画效果来实现组件的切换。在给定的代码示例中，使用了Vue.js的过渡效果，通过添加相应的CSS类来实现渐变和平移的动画效果。\[3\] 总结来说，v-if和:if都是用于条件渲染的指令，可以根据条件来动态显示或隐藏组件或元素。在给定的代码示例中，使用了v-if指令来根据flag的值来切换显示不同的组件，并结合动画效果实现了切换时的动画效果。 #### 引用[.reference_title] - *1* [V-if与display:none的区别 （v-if v-show display:none visibility:hidden 辨析）](https://blog.csdn.net/qq_33592641/article/details/115390880)[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* *3* [vue中组件v-if、v-else、:is的切换和过渡动画](https://blog.csdn.net/u011608672/article/details/114325313)[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、付费专栏及课程。

余额充值