vue實現點擊某個div顯示與隱藏內容功能實例
更新時間：2022年12月02日 15:42:33 作者：淵來有你
最近做項目有用到某個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變?yōu)閠rue顯示
},
}
}
</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的事件監(jiān)聽-->
<div class="page" @click="hide">
<!--添加.stop防止page的點擊事件觸發(fā)，導致無法顯示div-->
<button @click.stop="show">點擊顯示div</button>
<!--指定的div。添加.stop防止點擊div內的元素時，整個div被關閉-->
<div @click.stop>
...
</div>
</div>
<template>
<script>
export default {
methods:{
show(){},
hide(){}
}
}
</script>- 通過vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播，也可以使用原生js事件的event.stopPropagation()方法。
- 通過向指定的div添加.stop，可以實現只有點擊非該div內的元素時，才會往上冒泡至page，從而實現點擊其他地方隱藏div。
- 要向觸發(fā)顯示div的按鈕添加.stop，否則一點擊按鈕，觸發(fā)show()之后傳播到page，立馬就會觸發(fā)hide()，div就無法顯示。
總結
到此這篇關于vue實現點擊某個div顯示與隱藏內容功能的文章就介紹到這了,更多相關vue點擊div顯示與隱藏內容內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇快速解決Vue項目在IE瀏覽器中顯示空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了keep-alive保持組件狀態(tài)的方法，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue Nprogress進度條功能實現,NProgress是頁面跳轉是出現在瀏覽器頂部的進度條，本文通過實例代碼給大家講解，需要的朋友可以參考下2021-07-07
今天小編就為大家分享一篇vue.js的簡單自動求和計算實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue點擊Dashboard不同內容 跳轉到同一表格的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
大家都知道使用 Openlayers可以很靈活自由的做出各種地圖和空間數據的展示。而且這個框架是完全免費和開源的，本文記錄下 Vue 使用 OpenLayers 入門，使用 OpenLayers 創(chuàng)建地圖組件的相關知識，需要的朋友一起學習下吧2021-09-09
這篇文章主要為大家詳細介紹了vue實現登錄頁背景粒子特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何在表格中實現右鍵菜單問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要給大家介紹了關于vue如何實現pc和移動端布局的相關資料, Vue響應式布局適配是一種根據設備特性自動調整布局的方法,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10