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

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

平時(shí)項(xiàng)目中，經(jīng)常會(huì)做一些下拉菜單等效果，這種效果可能會(huì)需要通過(guò)一個(gè)按鈕來(lái)控制顯示隱藏，并且當(dāng)點(diǎn)擊頁(yè)面其他空白區(qū)域時(shí)，也要將其隱藏。

簡(jiǎn)單寫個(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)擊頁(yè)面事件

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

methods中寫入下方代碼

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

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

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

當(dāng)前標(biāo)題：使用Vue實(shí)現(xiàn)點(diǎn)擊顯示再點(diǎn)擊隱藏效果的示例
URL鏈接：http://chinadenli.net/article44/gesjee.html

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

廣告

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