Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏效果)
平時(shí)項(xiàng)目中，經(jīng)常會(huì)做一些下拉菜單等效果，這種效果可能會(huì)需要通過一個(gè)按鈕來控制顯示隱藏，并且當(dāng)點(diǎn)擊頁面其他空白區(qū)域時(shí)，也要將其隱藏。
簡單寫個(gè)Demo
<!-- 按鈕 -->
<button @click.stop="ShowHidden = !ShowHidden">顯示或隱藏</button>
<!-- 下拉列表 -->
<div v-if="ShowHidden" @click.stop="">
<!-- 列表內(nèi)容 -->
<p v-for="(item,index) in 5" :key="index" @click="ConBtn(index)">內(nèi)容{{index}}</p>
</div>
@click.stop="" 為組織冒泡
data中定義ShowHidden
data () {
return {
ShowHidden: false
}
},
mounted中寫上下方代碼，點(diǎn)擊頁面事件
mounted () {
document.addEventListener('click', this.HiddenClick)
},
methods中寫入下方代碼
methods: {
// 點(diǎn)擊頁面事件 隱藏需要隱藏的區(qū)域
HiddenClick () {
this.ShowHidden = false
},
// 點(diǎn)擊列表內(nèi)，選中內(nèi)容，并隱藏
ConBtn (val) {
alert('內(nèi)容' + val)
this.ShowHidden = false
}
}
這樣，一個(gè)簡單的效果就實(shí)現(xiàn)了，如果頁面中需要使用多，那么方法一樣，只需在要點(diǎn)擊顯示事件中，執(zhí)行一次讓其他下拉隱藏即可
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue實(shí)現(xiàn)用戶登錄及token驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)用戶登錄及token驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09
VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）
這篇文章主要介紹了VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-04-04
vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁面分享其他頁面)
這篇文章主要介紹了vue微信分享，在當(dāng)前頁面分享其他頁面，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
uniapp Vue3中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題
存在跨域問題的原因是因?yàn)闉g覽器的同源策略,也就是說前端無法直接發(fā)起跨域請求,同源策略是一個(gè)基礎(chǔ)的安全策略,但是這也會(huì)給uniapp/Vue開發(fā)者在部署時(shí)帶來一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題,需要的朋友可以參考下2024-06-06
Vue封裝localStorage設(shè)置過期時(shí)間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時(shí)間的相關(guān)資料,在這個(gè)示例中,我們在MyComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時(shí)間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06