Bagaimana untuk menyembunyikan kandungan dalam vue

Cara menyembunyikan kandungan dalam vue: 1. Tambahkan "v-show" pada div kandungan yang perlu disembunyikan atau dipaparkan; 2. Tambah acara klik pada div ikon font; ia dengan peralihan pada × , dan tambah atribut nama 4. Tambahkan gaya kesan pada pudar.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Bagaimana untuk menyembunyikan kandungan dalam vue?

vue melaksanakan fungsi mengklik div untuk muncul dan menyembunyikan kandungan

1 Mula-mula tambahkan v-show pada div kandungan yang perlu disembunyikan atau dipaparkan, yang mewakili Tentukan sama ada untuk menunjukkan atau menyembunyikan

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

2 Di sini saya mempunyai tanda × dalam kandungan terbuka untuk mematikan kesan paparan dan menambah acara klik pada div ikonfont. ikon

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

3. Dalam eksport lalai, kod adalah seperti berikut

 export default {
    data () {
      return {
        shopShow: false, //默认内容不显示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false变为true显示
      },
    }
  }
</script>

untuk mencapai

4. Tambah kesan animasi peralihan untuk menyembunyikannya, seperti berikut

dibalut dengan peralihan pada ×, Dan tambahkan atribut nama

<transition name="fade">
 <div class="activity-sheet-close" @click="toggleSupportShow">
            <span class="iconfont icon-close"></span>
 </div>         
 </transition>

untuk menambah gaya kesan pada pudar Tambahkan

&.fade-enter-active,&.fade-leave-active
        transition opacity .8s
&.fade-enter,&.fade-leave-to
        opacity 0

pada gaya untuk mencapai

Pembelajaran yang disyorkan: "tutorial video vue. js》

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan kandungan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!