vue如何實現點擊某個div顯示與隱藏內容功能

這篇文章主要介紹了vue如何實現點擊某個div顯示與隱藏內容功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue如何實現點擊某個div顯示與隱藏內容功能文章都會有所收獲，下面我們一起來看看吧。

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

<div  v-show="shopShow">內容</div>

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

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

3.在export default中代碼如下

 export default {
    data () {
      return {
        shopShow: false, //默認內容不顯示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false變為true顯示
      },
    }
  }
</script>

即可實現

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

則可實現

補充：Vue js 實現點擊頁面空白處隱藏指定div

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

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

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

2. 通過向指定的div添加.stop，可以實現只有點擊非該div內的元素時，才會往上冒泡至page，從而實現點擊其他地方隱藏div。

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

關于“vue如何實現點擊某個div顯示與隱藏內容功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue如何實現點擊某個div顯示與隱藏內容功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。