vue如何實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能

這篇文章主要介紹了vue如何實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue如何實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

1.首先在所需要隱藏或顯示的內(nèi)容div加v-show，代表判斷是否顯示或隱藏

<div  v-show="shopShow">內(nèi)容</div>

2.我這里是在打開(kāi)內(nèi)容中有一個(gè) × 號(hào)來(lái)關(guān)閉顯示效果，在iconfont圖標(biāo)的div加入一個(gè)點(diǎn)擊事件

<div  @click="toggleShopShow">
            <span class="iconfont icon-close"></span>
</div>

3.在export default中代碼如下

 export default {
    data () {
      return {
        shopShow: false, //默認(rèn)內(nèi)容不顯示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false變?yōu)閠rue顯示
      },
    }
  }
</script>

即可實(shí)現(xiàn)

4.為其隱藏添加過(guò)渡動(dòng)畫(huà)效果，如下

在 × 處用transition包裹，并添加name屬性

<transition name="fade">
 	<div class="activity-sheet-close" @click="toggleSupportShow">
            <span class="iconfont icon-close"></span>
 	</div>         
 </transition>

為fade添加效果樣式，在style中添加

&.fade-enter-active,&.fade-leave-active
        transition opacity .8s
&.fade-enter,&.fade-leave-to
        opacity 0

則可實(shí)現(xiàn)

補(bǔ)充：Vue js 實(shí)現(xiàn)點(diǎn)擊頁(yè)面空白處隱藏指定div

<template>
    <!--向頁(yè)面添加關(guān)閉div的事件監(jiān)聽(tīng)-->
  <div class="page" @click="hide">
  
    <!--添加.stop防止page的點(diǎn)擊事件觸發(fā)，導(dǎo)致無(wú)法顯示div-->
    <button @click.stop="show">點(diǎn)擊顯示div</button>
    
    <!--指定的div。添加.stop防止點(diǎn)擊div內(nèi)的元素時(shí)，整個(gè)div被關(guān)閉-->
    <div @click.stop>
        ...
    </div>
    
  </div>
<template>

<script>
export default {
    methods:{
        show(){},
        hide(){}
    }
        
}
</script>

1. 通過(guò)vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播，也可以使用原生js事件的event.stopPropagation()方法。

2. 通過(guò)向指定的div添加.stop，可以實(shí)現(xiàn)只有點(diǎn)擊非該div內(nèi)的元素時(shí)，才會(huì)往上冒泡至page，從而實(shí)現(xiàn)點(diǎn)擊其他地方隱藏div。

3. 要向觸發(fā)顯示div的按鈕添加.stop，否則一點(diǎn)擊按鈕，觸發(fā)show()之后傳播到page，立馬就會(huì)觸發(fā)hide()，div就無(wú)法顯示。

關(guān)于“vue如何實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue如何實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。