前端实现隐藏的方式的区别

隐藏的方式

隐藏一个元素可以通过

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

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

3.JS中隐藏("#id").hide() 显示("#id").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()

  $("#id").hide()实际上是设置了CSS中的display为none

• show()

  $("#id").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>
  

• v-if/wx:if;隐藏会删除元素节点，显示又会添加回来。相当于操作dom元素。

• v-show/wx:show;隐藏不会删除元素节点，只会删除它的文档流。相当于操作CSS的display属性。

  隐藏即在整个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属性

最后一句
这是小沉曦自己的学习心得！若有不正，还望斧正。希望渴望正义的你们不要吝啬对我的建议哟。嘻嘻，回见。