vue如何隱藏內(nèi)容

本篇內(nèi)容介紹了“vue如何隱藏內(nèi)容”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

vue隱藏內(nèi)容的方法：1、在所需要隱藏或顯示的內(nèi)容div加“v-show”；2、在iconfont圖標(biāo)的div加入一個點擊事件；3、在×處用transition包裹，并添加name屬性；4、為fade添加效果樣式即可。

vue實現(xiàn)點擊某個div出現(xiàn)和隱藏內(nèi)容功能

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

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

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

<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>

即可實現(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如何隱藏內(nèi)容”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！