Cara menyembunyikan dan memaparkan komponen uniapp secara dinamik

Dengan pembangunan aplikasi mudah alih yang berterusan, pembangun perlu dapat menyembunyikan dan menunjukkan komponen berbeza secara dinamik apabila membina antara muka pengguna yang kaya. Dalam uniapp, kami boleh menggunakan pengikatan sifat dinamik dan pemaparan bersyarat komponen vue untuk mencapai matlamat ini. Dalam artikel ini, kita akan melihat cara yang berbeza untuk mencapai fungsi ini serta kebaikan dan keburukannya.

Pertama, mari kita lihat kaedah paling mudah dan paling langsung: menggunakan arahan v-show. Fungsi arahan v-show adalah untuk menentukan sama ada elemen dipaparkan berdasarkan nilai ungkapan. Apabila ungkapan menilai kepada benar, elemen akan dipaparkan jika tidak, elemen akan disembunyikan.

Dalam uniapp, menggunakan arahan v-show adalah sangat mudah Anda hanya perlu menambahkannya pada komponen yang perlu disembunyikan atau ditunjukkan dan menetapkan nilainya kepada pembolehubah Boolean. Berikut ialah contoh penggunaan arahan v-show untuk menyembunyikan dan menunjukkan butang:

<template>
  <button v-show="showBtn">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan arahan v-show pada butang dan mengikat nilainya kepada A atribut data pada rancanganBtn. Apabila nilai showBtn adalah benar, butang akan dipaparkan; apabila nilai showBtn adalah palsu, butang akan disembunyikan. Dengan memanggil kaedah hideBtn dan showBtn, kami boleh menukar nilai showBtn secara dinamik untuk menyembunyikan dan menunjukkan butang. Kelebihan arahan

v-show ialah ia sebenarnya tidak mengalih keluar elemen daripada DOM, sebaliknya menyimpan elemen dalam dokumen dan hanya menyembunyikannya melalui CSS. Ini bermakna apabila kita perlu memaparkan semula elemen tersebut, keadaan elemen tersebut akan dikekalkan. Walau bagaimanapun, kelemahan arahan v-show ialah ia memerlukan manipulasi DOM setiap kali elemen dikemas kini, yang mungkin menjejaskan prestasi.

Cara kedua untuk menyembunyikan dan menunjukkan elemen ialah menggunakan arahan v-if. Tidak seperti arahan v-show, arahan v-if menentukan sama ada elemen harus wujud dalam DOM berdasarkan nilai ungkapan. Apabila ungkapan dinilai kepada benar, elemen akan wujud dalam DOM jika tidak, elemen akan dialih keluar daripada DOM.

Dalam uniapp, menggunakan arahan v-if juga sangat mudah. Hanya tambahkannya pada komponen yang perlu disembunyikan atau ditunjukkan, dan tetapkan nilainya kepada pembolehubah Boolean. Berikut ialah contoh penggunaan arahan v-if untuk menyembunyikan dan menunjukkan butang:

<template>
  <button v-if="showBtn" @click="hideBtn">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan arahan v-if pada butang dan mengikat nilainya kepada A atribut data pada rancanganBtn. Apabila nilai showBtn adalah benar, butang akan wujud dalam DOM apabila nilai showBtn adalah palsu, butang akan dialih keluar daripada DOM. Dengan memanggil kaedah hideBtn dan showBtn, kami boleh menukar nilai showBtn secara dinamik untuk menyembunyikan dan menunjukkan butang.

Kelebihan arahan v-if ialah ia hanya melaksanakan operasi DOM yang diperlukan setiap kali elemen dikemas kini, yang bermakna ia mempunyai kurang kesan terhadap prestasi. Walau bagaimanapun, kelemahan arahan v-if ialah apabila elemen dipadamkan daripada DOM, keadaan elemen juga akan dipadamkan Apabila kita perlu memaparkan semula elemen, kita perlu mencipta semula elemen dan keadaannya, yang boleh menjejaskan prestasi.

Akhir sekali, mari kita lihat kaedah ketiga untuk menyembunyikan dan menunjukkan elemen: menggunakan arahan v-bind untuk menukar kelas elemen secara dinamik. Dengan menukar kelas elemen, kita boleh menukar gaya elemen, dengan itu menyembunyikan dan memaparkan elemen.

Dalam uniapp, kita boleh mengikat kelas dinamik kepada komponen dengan menggunakan arahan v-bind. Apabila nilai ungkapan adalah benar, komponen akan menambah kelas ini jika tidak, komponen akan memadamkan kelas ini. Berikut ialah contoh penggunaan arahan v-bind untuk menyembunyikan dan menunjukkan butang:

<template>
  <button :class="{ &#39;hidden&#39;: !showBtn }" @click="hideBtn">点击我</button>
</template>

<style>
.hidden {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan arahan v-bind untuk mengikat kelas dinamik yang tersembunyi pada butang . Apabila nilai showBtn adalah palsu, kelas ini akan ditambahkan pada butang, dengan itu menyembunyikan butang apabila nilai showBtn adalah benar, kelas ini akan dipadamkan, dengan itu memaparkan butang. Pada masa yang sama, kita perlu mentakrifkan kelas .hidden dalam helaian gaya dan tetapkan butang untuk dipaparkan: tiada untuk menyembunyikan dan memaparkan elemen.

Berbeza dengan arahan v-show, kelebihan menggunakan arahan v-bind ialah kita boleh mencapai lebih banyak perubahan gaya dengan mengubah suai kelas elemen, bukan sekadar menukar keadaan paparan elemen. Kelemahannya ialah ia memerlukan penggunaan CSS untuk menggayakan elemen, yang mungkin mempunyai sedikit impak pada prestasi.

Ringkasnya, terdapat banyak cara untuk menyembunyikan dan memaparkan elemen Dalam uniapp, kita boleh memilih arahan v-show, arahan v-if atau menggunakan arahan v-bind untuk menukar kelas elemen secara dinamik. . Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri, dan kita perlu memilih kaedah yang paling sesuai mengikut keperluan dan senario tertentu.

Atas ialah kandungan terperinci Cara menyembunyikan dan memaparkan komponen uniapp secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!