vuejs隱藏當(dāng)前元素的實(shí)現(xiàn)方法：1、在頁面掛載完后，監(jiān)聽全局點(diǎn)擊事件；2、獲取當(dāng)前點(diǎn)擊的元素，根據(jù)需求獲取當(dāng)前元素本身的屬性；3、判斷當(dāng)前點(diǎn)擊元素與要隱藏的元素是否相同；4、當(dāng)前點(diǎn)擊元素與要隱藏的元素不相同則隱藏。

本文操作環(huán)境：Windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs怎么隱藏當(dāng)前元素？

Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素(實(shí)現(xiàn)思路)

1. 綁定元素

2. mounted生命周期

3. 實(shí)現(xiàn)思路

• 頁面掛載完后，監(jiān)聽全局點(diǎn)擊事件
• 獲取當(dāng)前點(diǎn)擊的元素，根據(jù)需求獲取當(dāng)前元素本身的屬性
• 判斷當(dāng)前點(diǎn)擊元素與要隱藏的元素是否相同
• 當(dāng)前點(diǎn)擊元素與要隱藏的元素不相同則隱藏

4. 最終效果

接著看下vue實(shí)現(xiàn)點(diǎn)擊目標(biāo)元素外頁面的其他地方隱藏彈窗

方法：

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

步驟2：給點(diǎn)擊目標(biāo)元素加點(diǎn)擊事件：@click=“popShow = true”。

備注：popShow 為控制彈窗顯示與隱藏的標(biāo)志。

PS：下面看下vue實(shí)現(xiàn)點(diǎn)擊其他地方隱藏p

方法一：　　

　　通過監(jiān)聽事件

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

方法二（比較好）：

　　給最外層的p加個(gè)點(diǎn)擊事件 @click="userClick=false"

　　給點(diǎn)擊的元素上面加上：@click.stop="userClick=!userClick"

方法三：

<template> <!--向頁面添加關(guān)閉p的事件監(jiān)聽--> <p class="page" @click="hide">  <!--添加.stop防止page的點(diǎn)擊事件觸發(fā)，導(dǎo)致無法顯示p--> <button @click.stop="show">點(diǎn)擊顯示p</button>  <!--指定的p。添加.stop防止點(diǎn)擊p內(nèi)的元素時(shí)，整個(gè)p被關(guān)閉--> <p @click.stop> ... </p>  </p> <template>  <script> export default { methods:{ show(){}, hide(){} }  } </script>

小結(jié)：

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

通過向指定的p添加.stop，可以實(shí)現(xiàn)只有點(diǎn)擊非該p內(nèi)的元素時(shí)，才會(huì)往上冒泡至page，從而實(shí)現(xiàn)點(diǎn)擊其他地方隱藏p。

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

推薦：《最新的5個(gè)vue.js視頻教程精選》