前端实现“隐藏的方式”的区别有哪些

这篇文章将为大家详细讲解有关前端实现“隐藏的方式”的区别有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

隐藏方式

隐藏一个元素可以通过以下方式：

html元素加上：hidden="hidden"。

属性设置为 display ：none，或把 visibility ：hidden。但是请注意，这两种方法会产生不同的结果

js中隐藏element.hide(); 显示element.show()

v-if/v-show;(Vue中的)wx:if/wx:show(微信小程序里的)

隐藏方式的解释

hidden="hidden"

• 隐藏要占用域的空间。

写在html内部的

首页

<h2 hidden="hidden"><span>首页</span></h2>

• 删除hidden="hidden"这条语句就可实现显示

• CSS里面的display会覆盖html中的hidden属性

display ：none

• display 隐藏不占用域的空间。

隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

• display 有多种显示方式

display：block //块级显示

display：inline//行级显示

• 不删除节点

虽然在页面中消失了，但是通过js获取节点的方式，还是会获取到;仅仅只是在文档流(及页面中)隐藏消失而已。

visibility ：hidden

visibility 隐藏要占用域的空间。

隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

就像把透明度设置为0，虽然你看不见，但是你知道它就在那。

• visibility 的显示只有一个 visibility：visible;

• 不删除节点

hide() show()

• 写在JS中的

• hide()

element.hide()实际上是设置了CSS中的display为none

• show()

element.show()实际上是设置了CSS中的display为block

• 效果和display一样。

v-if/wx:if、v-show/wx:show

• 隐藏不占用域的空间

• 隐藏true，显示false

<div   v-if="{{true}}">    v-if</div> <view  wx:if="{{false}}">  wx:if</view>

• 隐藏会删除元素节点，显示又会添加回来

隐藏即在整个Dom结构和页面中都找不到，相当于将这个元素节点完全删除掉。

总结

关于“前端实现“隐藏的方式”的区别有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。