vuejs如何隱藏當前元素

本篇文章為大家展示了vuejs怎么隱藏當前元素，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

vuejs隱藏當前元素的實現方法：1、在頁面掛載完后，監聽全局點擊事件；2、獲取當前點擊的元素，根據需求獲取當前元素本身的屬性；3、判斷當前點擊元素與要隱藏的元素是否相同；4、當前點擊元素與要隱藏的元素不相同則隱藏。

本文操作環境：Windows7系統、vue2.9.6版，DELL G3電腦。

vuejs怎么隱藏當前元素？

Vue實現點擊當前元素以外的地方隱藏當前元素(實現思路)

1. 綁定元素

2. mounted生命周期

3. 實現思路

• 頁面掛載完后，監聽全局點擊事件

• 獲取當前點擊的元素，根據需求獲取當前元素本身的屬性

• 判斷當前點擊元素與要隱藏的元素是否相同

• 當前點擊元素與要隱藏的元素不相同則隱藏

4. 最終效果

接著看下vue實現點擊目標元素外頁面的其他地方隱藏彈窗

方法：

步驟1：給頁面最外出的元素p加點擊事件：@click=“popShow = false”。

步驟2：給點擊目標元素加點擊事件：@click=“popShow = true”。

備注：popShow 為控制彈窗顯示與隱藏的標志。

PS：下面看下vue實現點擊其他地方隱藏p

方法一：　　

　　通過監聽事件

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

方法二（比較好）：

　　給最外層的p加個點擊事件 @click="userClick=false"

　　給點擊的元素上面加上：@click.stop="userClick=!userClick"

方法三：

<template>
<!--向頁面添加關閉p的事件監聽-->
<p class="page" @click="hide">

<!--添加.stop防止page的點擊事件觸發，導致無法顯示p-->
<button @click.stop="show">點擊顯示p</button>

<!--指定的p。添加.stop防止點擊p內的元素時，整個p被關閉-->
<p @click.stop>
...
</p>

</p>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

小結：

通過vue.js 事件的.stop修飾符可以阻止事件繼續冒泡傳播，也可以使用原生js事件的event.stopPropagation()方法。

通過向指定的p添加.stop，可以實現只有點擊非該p內的元素時，才會往上冒泡至page，從而實現點擊其他地方隱藏p。

要向觸發顯示p的按鈕添加.stop，否則一點擊按鈕，觸發show()之后傳播到page，立馬就會觸發hide()，p就無法顯示。

上述內容就是vuejs怎么隱藏當前元素，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。