們在日常編碼的時候，隱藏一個 dom 元素有很多種方式，今天我們來盤點一下隱藏 dom 元素有哪些方式，最后一種，你絕對沒有用過。

display: none

作為經常用來隱藏元素的 css 屬性，display: none 相信大家并不陌生，使用了 display: none 會直接將元素從文檔樹中隱藏掉。

一旦元素使用了 display: none 之后，這個元素就從文檔樹中隱藏掉了。

visibility: hidden

作為經常和 display: none 進行比較的屬性 visibility: hidden ，也可以用來隱藏一個 DOM 元素，但是唯一不同的是 visibility: hidden 隱藏的元素仍然會存在文檔流中，也就是說它仍然會占據頁面的位置空間，只是不可見而已。

opacity

opacity 屬性也是同樣的類似的實現原理，通過調整元素的透明度來實現元素 “隱身”的效果。

同樣也是占據文檔流的。

text-index

text-indent 設置區塊元素中文本行前面空格（縮進）的長度, 因此如果我們想要隱藏的元素是文本內容的時候，我們就可以使用這個屬性將文本縮進到視口范圍之外，從而達到隱藏的效果。

只針對只包含文本內容的容器有效

overflow 溢出隱藏

通過設置容器的 height: 0 和 overflow: hidden，也能做到隱藏元素的效果。因為可以把溢出來的內容直接隱藏掉，從而實現元素隱藏的效果。

移動元素至視口外

我們還可以通過障眼法，將元素脫離文檔流并將其移動到視口外面實現元素隱藏的效果。實現這一效果可以通過

• 絕對定位 + 任意方向的定位值設置無窮大

• transform 將元素進行變化，實現位置在視口外

hidden 屬性

hidden 屬性是最簡單的，直接在元素上設置 hidden 屬性就可以了， 而且 添加完之后的元素是不會占據原先的文檔位置。

我們還可以設置 aria-hidden 屬性，實現無障礙模式下的元素隱藏

clip-path 裁剪元素

這種方式并不是很常見，因為我們本身在業務中使用 clip-path 的場景不多，這個屬性主要的功能就是將元素剪裁成顯示區域為一個 1px * 1px 的矩形，這樣就在視覺上實現了隱藏元素的效果

clip-path 有一些小小的兼容性問題，但是基本上問題不大。

如果需要適配低版本瀏覽器中使用，我們可以使用 clip 屬性來實現"隱藏"的效果

使用 clip 屬性的時候，要先通過 position: absolute 將元素脫離文檔流才行

小結

通過上面的介紹，相信大家對隱藏元素有了更多的了解和認識了，以后在面對不同的需求時，就可以使用上述不同的方法去匹配相應的需求，從而達到事倍功半的效果。

如果這篇文章對你有幫助，歡迎點贊、關注?、轉發 ? ！

ue 2 指令是特殊的 HTML 屬性，用于將數據綁定到 DOM 元素或執行其他操作。它們以 v- 前綴開頭，后面跟著指令名稱。

內置指令

Vue 2 提供了許多內置指令，用于執行常見任務，例如：

v-model： 將數據綁定到輸入元素的值

v-text： 將數據綁定到元素的文本內容

v-html： 將數據綁定到元素的 HTML 內容

v-if： 根據條件顯示或隱藏元素

v-for： 循環遍歷數組并渲染元素

v-on： 在元素上添加事件偵聽器

v-bind： 動態綁定元素屬性

v-class： 動態添加或刪除 CSS 類

自定義指令

您還可以創建自己的自定義指令以擴展 Vue 的功能。自定義指令由 JavaScript 對象組成，該對象定義指令的鉤子函數。

指令鉤子函數包括：

bind： 指令首次綁定到元素時調用

inserted： 指令綁定的元素插入 DOM 時調用

update： 指令綁定的元素或其屬性更新時調用

componentUpdated： 指令所在的組件更新時調用

unbind： 指令與元素解綁時調用

有關 Vue 2 指令的更多信息，請參閱以下資源：

Vue 2 指令文檔 [移除了無效網址]

創建自定義指令 [移除了無效網址]

以下是一些 Vue 2 指令的示例：

v-model 示例

HTML