Cara menggunakan v-show untuk mengawal paparan dan menyembunyikan elemen dalam Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina aplikasi web satu halaman yang dinamik dan responsif. Antaranya, arahan v-show ialah arahan yang biasa digunakan dalam Vue, yang boleh digunakan untuk mengawal paparan dan menyembunyikan elemen. Artikel ini akan memperkenalkan cara menggunakan arahan v-show dalam Vue.

1. Penggunaan arahan
Penggunaan arahan v-show adalah sangat mudah. Sintaksnya adalah seperti berikut:

v-show="expression"

Di mana, ungkapan ialah ungkapan JavaScript Jika hasil ungkapan itu benar, elemen akan dipaparkan; Jika ungkapan bernilai palsu, elemen akan disembunyikan.

2. Contoh penerangan
Mari lihat contoh di bawah, yang mempunyai butang dan perenggan. Apabila kami mengklik butang, keadaan paparan perenggan akan berubah:

<template>
  <div>
    <button @click="toggleShow">点击切换</button>
    <p v-show="show">这里是段落文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>

Dalam kod di atas, kami menentukan pembolehubah tunjukkan melalui atribut data dan memulakannya kepada benar. Dalam templat, kami menggunakan arahan v-show untuk mengikat perenggan kepada pembolehubah tunjukkan. Dalam kaedah toggleShow, kami menogol keadaan paparan perenggan dengan hanya menyongsangkan pembolehubah tunjukkan.

Seperti yang anda lihat, adalah sangat mudah untuk menggunakan v-show untuk mengawal paparan dan menyembunyikan elemen Anda hanya perlu mengikat arahan kepada pembolehubah jenis Boolean. Tidak seperti arahan v-if, v-show tidak memusnahkan dan mencipta semula elemen apabila elemen ditukar, jadi ia berfungsi lebih baik daripada v-if.

3. Nota tentang arahan
Apabila menggunakan v-show, anda perlu memberi perhatian kepada isu berikut:

1. v-show hanya boleh terikat dengan elemen dengan paparan atribut dihidupkan, seperti div, p, span, dsb. Jika anda ingin mengikat arahan v-show kepada komponen tersuai, pastikan komponen tersebut mempunyai atribut paparan.
2. Jika anda perlu bertukar antara berbilang elemen, adalah disyorkan untuk menggunakan arahan v-if. Oleh kerana v-show tidak memusnahkan dan mencipta semula elemen, jika anda perlu menukar keadaan paparan elemen dengan kerap, ia akan memberi kesan tertentu pada prestasi.
3. Jika anda ingin menyembunyikan elemen tanpa mengambil ruang pada halaman, pertimbangkan untuk menggunakan arahan v-if.

4. Ringkasan
Arahan v-show ialah arahan biasa yang digunakan dalam Vue untuk mengawal paparan dan penyembunyian elemen. Berbanding dengan arahan v-if, v-show lebih sesuai untuk senario di mana keadaan paparan elemen perlu kerap ditukar. Apabila menggunakan v-show, anda perlu ambil perhatian bahawa elemen terikat mesti mempunyai atribut paparan, dan jika anda perlu bertukar antara berbilang elemen, anda harus mempertimbangkan untuk menggunakan arahan v-if.

Atas ialah kandungan terperinci Cara menggunakan v-show untuk mengawal paparan dan menyembunyikan elemen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!