Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)

更新時間：2020年01月16日 10:34:00 作者：鵬仔先生

這篇文章主要介紹了Vue實現(xiàn) 點擊顯示再點擊隱藏點擊頁面空白區(qū)域也隱藏效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

平時項目中，經(jīng)常會做一些下拉菜單等效果，這種效果可能會需要通過一個按鈕來控制顯示隱藏，并且當點擊頁面其他空白區(qū)域時，也要將其隱藏。

簡單寫個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中寫上下方代碼，點擊頁面事件

 mounted () {
  document.addEventListener('click', this.HiddenClick)
 },

methods中寫入下方代碼

 methods: {
  // 點擊頁面事件 隱藏需要隱藏的區(qū)域
  HiddenClick () {
   this.ShowHidden = false
  },
  // 點擊列表內(nèi)，選中內(nèi)容，并隱藏
  ConBtn (val) {
   alert('內(nèi)容' + val)
   this.ShowHidden = false
  }
 }

這樣，一個簡單的效果就實現(xiàn)了，如果頁面中需要使用多，那么方法一樣，只需在要點擊顯示事件中，執(zhí)行一次讓其他下拉隱藏即可

總結(jié)

以上所述是小編給大家介紹的Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫進行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下
2023-06-06
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue中跨標簽通信詳解
這篇文章主要為大家詳細介紹了介紹了Vue中跨標簽通信的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
Vue實現(xiàn)用戶登錄及token驗證
這篇文章主要為大家詳細介紹了Vue實現(xiàn)用戶登錄及token驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue3使用全局函數(shù)或變量的2種常用方式代碼
在Vue3項目中需要頻繁使用某一個方法,配置到全局感覺會方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下
2023-09-09
VUE table表格動態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實時更新）
這篇文章主要介紹了VUE table表格動態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實時更新）,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2020-04-04
vue微信分享的實現(xiàn)(在當前頁面分享其他頁面)
這篇文章主要介紹了vue微信分享，在當前頁面分享其他頁面，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
使用vis-timeline繪制甘特圖并實現(xiàn)時間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實現(xiàn)時間軸的中文化(案例代碼),本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-02-02
uniapp Vue3中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題
存在跨域問題的原因是因為瀏覽器的同源策略,也就是說前端無法直接發(fā)起跨域請求,同源策略是一個基礎(chǔ)的安全策略,但是這也會給uniapp/Vue開發(fā)者在部署時帶來一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題,需要的朋友可以參考下
2024-06-06
Vue封裝localStorage設(shè)置過期時間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下
2024-06-06