Cara menggunakan arahan v-show untuk memaparkan dan menyembunyikan elemen dalam Vue

Vue ialah rangka kerja JavaScript popular yang membolehkan anda membina aplikasi web yang dinamik dan moden. Vue menyediakan beberapa arahan, termasuk arahan v-show, untuk mencipta elemen interaktif dalam paparan. Dalam artikel ini, kami akan meneroka cara menggunakan arahan v-show untuk memaparkan dan menyembunyikan elemen dalam Vue.

Arahan v-show ialah arahan yang digunakan untuk menunjukkan atau menyembunyikan elemen berdasarkan keadaan tertentu. Arahan v-show boleh dilampirkan pada mana-mana elemen HTML, seperti div, span, p, butang, dll. Jika nilai arahan adalah benar, elemen akan ditunjukkan, jika tidak elemen akan disembunyikan. Berikut ialah contoh mudah menggunakan arahan v-show untuk menunjukkan dan menyembunyikan elemen:

<template>
  <div>
    <button @click="toggleText">Toggle Text</button>
    <p v-show="showText">Hello World!</p>
  </div>
</template>

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

Dalam contoh ini, kami mencipta komponen yang mengandungi butang dan tag p. Kami menggunakan arahan v-show untuk mengikat tag p kepada nilai showText. Nilai lalai showText adalah benar, jadi apabila komponen dimulakan, tag p akan dipaparkan. Apabila pengguna mengklik butang, kami memanggil kaedah toggleText, yang menukar nilai showText untuk menunjukkan atau menyembunyikan label p.

Apabila menggunakan arahan v-show, kami boleh menggabungkan sifat yang dikira untuk mencapai kawalan bersyarat yang lebih kompleks. Contohnya, contoh berikut menunjukkan cara menggunakan sifat yang dikira untuk menunjukkan atau menyembunyikan elemen:

<template>
  <div>
    <input type="checkbox" v-model="isChecked"> Show Text
    <p v-show="shouldShowText">Hello World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  computed: {
    shouldShowText() {
      return this.isChecked
    }
  }
}
</script>

Dalam contoh ini, kami mencipta komponen yang mengandungi kotak pilihan dan teg p. Kami menggunakan arahan v-model untuk mengikat kotak pilihan kepada nilai isChecked. Kami menggunakan harta yang dikira shouldShowText untuk mengikat tag p kepada nilai sama ada kotak semak dipilih. shouldShowText akan kembali benar untuk menunjukkan tag p jika kotak semak ditandakan, jika tidak, ia akan kembali palsu untuk menyembunyikan tag p.

Ringkasan

Arahan v-show ialah cara yang berkesan untuk memaparkan dan menyembunyikan elemen dalam Vue. Ia memudahkan untuk menunjukkan atau menyembunyikan elemen berdasarkan keadaan tertentu. Sama ada kawalan bersyarat mudah atau pengiraan kompleks, arahan v-show ialah alat yang sangat praktikal yang boleh digunakan untuk melaksanakan keperluan biasa aplikasi Vue interaktif anda.

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