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就無法顯示。
推薦：《最新的5個vue.js影片教學精選》
以上是vuejs怎麼隱藏目前元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
