大家好，前端区别这里是实现式沉曦!一个前端的小学生。

小沉曦在开发的隐藏过程里经常用到的隐藏，用户的前端区别的需求里也经常会要求我们显示和不显示;但是前端里实现隐藏的方式那么多我们该选择哪一个呢?回答当然是......都要!小孩纸才做选择。哈哈，实现式咱如此甚好，隐藏“整”。前端区别

隐藏方式

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

1.HTML元素加上：hidden="hidden"。实现式

2.属性设置为 display ：none，隐藏或把 visibility ：hidden。前端区别但是实现式请注意，这两种方法会产生不同的隐藏结果

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

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

隐藏方式的解释

hidden="hidden"

隐藏要占用域的空间。

写在html内部的前端区别

首页

<h1 hidden="hidden"><span>首页</span></h1>  删除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结构和页面中都找不到，相当于将这个元素节点完全删除掉。

总结

方式 位置区别 文档流区别 其他区别 hidden="hidden" 写在HTML标签属性中， 占用域的空间 隐藏不会删除节点 会被CSS里面的display覆盖 visibility :hidden; 写在CSS 占用域的空间 隐藏不会删除节点 display ：none; 写在CSS 不占用域的空间 隐藏不会删除节点 hide() ; show(); 写在JS 不占用域的空间 隐藏不会删除节点，相当于修改display属性 v-if/wx:if ; 写在HTML标签属性中， 不占用域的空间 隐藏会删除节点，有更高的切换消耗 v-show/wx:show; 写在HTML标签属性中， 不占用域的空间 隐藏不会删除节点，相当于修改display属性

最后一句

这是小沉曦自己的学习心得!若有不正，还望斧正。其实在实际开发过程中根据需要选择技术才是最好的捷径哦，因为你永远不知道用户在想什么，嘻嘻 希望渴望正义的你们不要吝啬对我的建议哟。回见!

作者：沉曦

链接：https://juejin.cn/post/6950802602753949710

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。亿华云