這篇文章將為大家詳細(xì)講解有關(guān)前端實(shí)現(xiàn)“隱藏的方式”的區(qū)別有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司，是成都地區(qū)的互聯(lián)網(wǎng)解決方案提供商，用心服務(wù)為企業(yè)提供網(wǎng)站建設(shè)、app軟件開發(fā)、小程序開發(fā)、系統(tǒng)定制網(wǎng)站開發(fā)和微信代運(yùn)營服務(wù)。經(jīng)過數(shù)十年的沉淀與積累，沉淀的是技術(shù)和服務(wù)，讓客戶少走彎路，踏實(shí)做事，誠實(shí)做人，用情服務(wù)，致力做一個(gè)負(fù)責(zé)任、受尊敬的企業(yè)。對客戶負(fù)責(zé)，就是對自己負(fù)責(zé)，對企業(yè)負(fù)責(zé)。

隱藏方式

隱藏一個(gè)元素可以通過以下方式：

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

2.屬性設(shè)置為 display ：none，或把 visibility ：hidden。但是請注意，這兩種方法會產(chǎn)生不同的結(jié)果

3.JS中隱藏element.hide(); 顯示element.show()

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

隱藏方式的解釋

hidden="hidden"

• 隱藏要占用域的空間。

寫在html內(nèi)部的

首頁

首頁

• 刪除hidden="hidden"這條語句就可實(shí)現(xiàn)顯示

• CSS里面的display會覆蓋html中的hidden屬性

display ：none

• display 隱藏不占用域的空間。

隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

• display 有多種顯示方式

display：block //塊級顯示

display：inline//行級顯示

• 不刪除節(jié)點(diǎn)

雖然在頁面中消失了，但是通過js獲取節(jié)點(diǎn)的方式，還是會獲取到;僅僅只是在文檔流(及頁面中)隱藏消失而已。

visibility ：hidden

visibility 隱藏要占用域的空間。

隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

就像把透明度設(shè)置為0，雖然你看不見，但是你知道它就在那。

• visibility 的顯示只有一個(gè) visibility：visible;

• 不刪除節(jié)點(diǎn)

hide() show()

• 寫在JS中的

• hide()

element.hide()實(shí)際上是設(shè)置了CSS中的display為none

• show()

element.show()實(shí)際上是設(shè)置了CSS中的display為block

• 效果和display一樣。

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

• 隱藏不占用域的空間

• 隱藏true，顯示false

    v-if