使用Vue實現點擊顯示再點擊隱藏效果的示例

這篇文章給大家分享的是有關使用Vue實現點擊顯示再點擊隱藏效果的示例的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創新互聯是一家專業提供舟曲企業網站建設,專注與成都網站設計、成都做網站、H5技術、小程序制作等業務。10年已為舟曲眾多企業、政府機構等服務。創新互聯專業的建站公司優惠進行中。

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

簡單寫個Demo

 <!-- 按鈕 -->
 <button @click.stop="ShowHidden = !ShowHidden">顯示或隱藏</button>
 <!-- 下拉列表 -->
 <div v-if="ShowHidden" @click.stop="">
  <!-- 列表內容 -->
  <p v-for="(item,index) in 5" :key="index" @click="ConBtn(index)">內容{{index}}</p>
 </div>

@click.stop="" 為組織冒泡

data中定義ShowHidden

 data () {
  return {
   ShowHidden: false
  }
 },

mounted中寫上下方代碼，點擊頁面事件

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

methods中寫入下方代碼

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

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

感謝各位的閱讀！關于“使用Vue實現點擊顯示再點擊隱藏效果的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前標題：使用Vue實現點擊顯示再點擊隱藏效果的示例
URL鏈接：http://m.kartarina.com/article44/gesjee.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、定制網站、商城網站、微信小程序、網站排名、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯