v-show,v-if,display:none,visibility:hidden 的区别和本质

渲染树=dom树+cssom树

浏览器真正渲染在浏览器屏幕是根据渲染树。

display:none;

节点还在dom树上,但是不会进入渲染树。所以它不会显示,因为浏览器不会渲染它。
同时它的子孙后代都不会显示,即使子孙后代改变display样式也没用,因为渲染树里面压根没有它们。
它们也不占据物理空间。

visibility:hidden;

节点在渲染树上,浏览器隐藏它了,你看不见它,但是它依然占据物理空间,同时如果是有序列别它依然占据一个有序的数字。
它的子孙后代也继承 visibility:hidden;这个样式,都隐藏了。但是,如果你改变子孙的样式 visibility:visible; 就能看见子孙了。

v-show 的实现原理

就是自动加上 display:none;这个样式

v-if

节点不在dom树上,自然也就不在渲染树上了。
子孙后代也不在dom树上。
所以不会显示节点和它的子孙后代。
它们也不占据物理空间。

推荐这些文章:

created和mounted的区别

答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

...

浏览器滚动条样式设置

::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;

/* display: none; */
}
/* //滚动条的滑块 */
::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.7);
border-radius: 4px;
}

 

...

v-if与v-show的区别

1.方式:v-if操作DOM,v-show操作display(样式)2.编译:v-if 存在DOM的编译和卸载过程 惰性的(条件为真实开始局部编译) v-show 基于css,不存在DOM的编译与卸载过程3.性能:v-if 消耗高 v-show消耗低,适合频繁切换4.使用场景: v-if 执行业务相对比较复杂代码 v-show 适合频繁切换

...

尚硅谷vue - 5 条件渲染

1. 基础

1. v-show,当为false时,等于display:none
2. v-if,当为false时,标签直接就被删除了(效率上不如v-show)

 
 3. template标签,不影响原有标签结构。可以跟v-if组合使用

 
 

 

...

解决设置了display:none的元素,会先展示再隐藏

问题:元素明明设置了display:none,但是在刷新页面的时候却会先显示了出来,然后才会隐藏,实现display:none
原因:由于元素渲染的时候,样式还没有应用上去,导致的
解决办法:使用内联样式,动态改变display的值为none或者是block,使用moseenter和mouseleave事件替代hover,在moseenter和mouseleave事件中去改变display的值

...

浏览器渲染原理

大纲:
1-  输入一个url发生了什么? 
1-  一个http请求、响应、页面渲染完整流程是怎样的?
1- 扩展:性能优化
 
 
 

 

 

...

defer 和 async的区别

页面的加载和渲染过程 1.浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM; 2.在构建DOM过程中,如果遇到外联的样式声明和脚本声明,则暂停文档解析,创建新的网络连接,并开始下载样式文件和脚本文件; 3.样式文件下载完成后,构建CSSDOM;脚本文件下载完成后,解释

本文来自博客园,作者:Kira的学习笔记,转载请注明原文链接:https://www.cnblogs.com/kira2022/p/16109674.html

...

隐藏--display:none;---高德地图

 要用visibility: hidden;隐藏
不能用display:none;
不然会导致显示不正常

1、visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。
2、display: none----将元素的显示设为无,即在网页中不占任何的位置。
很多弹窗多是用display:none;实现~~~
 

...

CSS – display, visibility, opacity 的区别

前言
要让一个元素"消失", 有 3 种做法. 它们有一点点的不同. 在实战时要清楚什么时候用什么哦.
 
例子说明

<div class="abc">
<div class="xyz"></div>
</div>

CSS Style

.abc {
border: 1px solid red;
width: max-content;
.xyz {
width: 100px;
height: 100px;
background-color: red;
}
}

效果

 
&n...

vue3:Tabs 标签页中使用echarts报错Can't get dom width or height

产生的原因:Tabs 标签页在点击的时候,才会去执行DOM渲染,但是echarts如果在页面加载的时候就进行渲染了(echarts渲染时,必须要输入width or height ),但是此时tabs里面的单个标签DOM还没被渲染,所以就算给echarts定义了width or height ,也会检测不到;
网上有很多解决办法,其中一种是点击了某个Tabs 标签,然后延时再去执行渲染echarts;此时保证了标签被渲染之后,echarts才会被渲染
//监听tab栏切换
const changeTab=(TabPanelName)=>{
if(TabPanelName==="0"...

文章标题:v-show,v-if,display:none,visibility:hidden 的区别和本质
文章链接:https://www.dianjilingqu.com/51298.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>