vue 怎麼隱藏內容

vue隱藏內容的方法：1、在所需要隱藏或顯示的內容div加上「v-show」；2、在iconfont圖示的div加入一個點擊事件；3、在×處以transition包裹，並添加name屬性；4、為fade添加效果樣式即可。

本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue 怎麼隱藏內容？

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影片教學》

以上是vue 怎麼隱藏內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！