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

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

隐藏方式

隐藏一个元素可以通过以下方式：
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"

• 隐藏要占用域的空间。

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

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

display ：none

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

• display 有多种显示方式

• 不删除节点

visibility ：hidden

• visibility 隐藏要占用域的空间。

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

• 不删除节点

hide() show()

• 写在JS中的

• hide()

• show()

• 效果和display一样。

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

• 隐藏不占用域的空间

• 隐藏true，显示false

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

总结

最后一句

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