快捷導(dǎo)航

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

更新時(shí)間：2022年12月02日 15:42:33 作者：淵來(lái)有你

最近做項(xiàng)目有用到某個(gè)div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

2.我這里是在打開內(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)畫效果，如下

在 × 處用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)聽-->
  <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>

通過(guò)vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播，也可以使用原生js事件的event.stopPropagation()方法。
通過(guò)向指定的div添加.stop，可以實(shí)現(xiàn)只有點(diǎn)擊非該div內(nèi)的元素時(shí)，才會(huì)往上冒泡至page，從而實(shí)現(xiàn)點(diǎn)擊其他地方隱藏div。
要向觸發(fā)顯示div的按鈕添加.stop，否則一點(diǎn)擊按鈕，觸發(fā)show()之后傳播到page，立馬就會(huì)觸發(fā)hide()，div就無(wú)法顯示。

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊div顯示與隱藏內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: