使用Vue實現(xiàn)點擊顯示再點擊隱藏效果的示例

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

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

平時項目中，經(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í)行一次讓其他下拉隱藏即可

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

當前標題：使用Vue實現(xiàn)點擊顯示再點擊隱藏效果的示例
URL鏈接：http://muchs.cn/article44/gesjee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、定制網(wǎng)站、商城網(wǎng)站、微信小程序、網(wǎng)站排名、建站公司

廣告

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