快捷導航

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

更新時間：2022年12月02日 15:42:33 作者：淵來有你

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

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

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

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

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

3.在export default中代碼如下

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

即可實現(xiàn)

4.為其隱藏添加過渡動畫效果，如下

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

則可實現(xiàn)

補充：Vue js 實現(xiàn)點擊頁面空白處隱藏指定div

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

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

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

總結(jié)

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

您可能感興趣的文章: