前端实现隐藏的方式的区别
隐藏方式
隐藏一个元素可以通过以下方式：
- HTML元素加上：hidden="hidden";
- css属性设置为 display ：none，或把 visibility ：hidden;
- JS中隐藏element.element.hide(); 显示element.element.show();
- Vue中的v-if/v-show;
- 微信小程序里的wx:if/wx:show;
隐藏方式的解释
hidden="hidden"
-
写在HTML元素上
-
隐藏要占用域的空间,即不删除文档流节点，相当于把透明度改为0。
写在html内部的
<h1 hidden="hidden"><span>首页</span></h1> -
删除hidden="hidden"这条语句就可实现显示
-
CSS里面的display会覆盖html中的hidden属性
display ：none
-
写在CSS样式中
-
隐藏不占用域的空间，即删除文档流节点。
隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
-
隐藏会删除文档节点，不删除dom节点。
虽然在页面中消失了，但是通过js获取节点的方式，还是会获取到；仅仅只是在文档流（及页面中）隐藏消失而已。
-
display 有多种显示方式
display：block //块级显示
display：inline//行级显示
visibility ：hidden
-
写在CSS样式中
-
隐藏要占用域的空间。
隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
就像把透明度设置为0，虽然你看不见，但是你知道它就在那。
-
隐藏不会删除dom节点
-
visibility 的显示只有一个 visibility：visible；即可
hide() show()
- 写在JS中的
- 隐藏 hide()
element.hide()实际上是设置了CSS中的display为none
- 显示 show()
element.show()实际上是设置了CSS中的display为block
- 隐藏/显示相当于修改display的属性值。
v-if/wx:if
- 隐藏不占用域的空间
- 表达式为布尔值为true就隐藏，false就显示
<div v-if="{{true}}"> v-if</div> <view wx:if="{{false}}"> wx:if</view> - 隐藏会删除dom节点，显示又会添加回来
隐藏即在整个Dom结构和页面中都找不到，相当于将这个元素节点完全删除掉。
v-show/wx:show
- 隐藏不占用域的空间
- 表达式为布尔值为true就隐藏，false就显示
- 隐藏不会删除dom节点，相当于修改display属性值
总结
| 方式 | 位置区别 | 文档流区别 | 其他区别 |
|---|---|---|---|
| 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属性 |
最后一句
这是小沉曦自己的学习心得！若有不正，还望斧正。其实在实际开发过程中根据需要选择技术才是最好的捷径哦，因为你永远不知道用户在想什么，嘻嘻 希望渴望正义的你们不要吝啬对我的建议哟。回见！
