Aplikasi lanjutan Vue: Penggunaan praktikal v-if, v-show, v-else, v-else-if untuk mencapai pemaparan bersyarat yang kompleks

Aplikasi lanjutan Vue: praktikal v-if, v-show, v-else, v-else-if untuk mencapai pemaparan bersyarat yang kompleks

Pengenalan:
Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Ia menyediakan banyak arahan, termasuk v-if, v-show, v-else, v-else-if, untuk memaparkan dan memaparkan elemen DOM mengikut syarat yang berbeza. Dalam artikel ini, kami akan meneroka cara memanfaatkan arahan ini untuk melaksanakan pemaparan bersyarat yang kompleks, menggambarkannya dengan contoh kod konkrit. Arahan

1. v-if
   v-if digunakan untuk memaparkan elemen DOM secara dinamik berdasarkan syarat yang diberikan. Penggunaannya mudah, tambahkan arahan v-if pada elemen yang perlu diberikan secara bersyarat, dan ikatkannya pada ungkapan yang mengembalikan nilai Boolean. Jika ungkapan dinilai kepada benar, elemen akan dipaparkan, jika tidak ia akan dialih keluar.

Contoh kod:

<template>
  <div>
    <div v-if="showMessage">Hello World!</div>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

Dalam contoh di atas, kami menukar nilai showMessage apabila butang diklik, dengan itu mengawal paparan dan penyembunyian Hello World!.

2. v-show
   Arahan v-show juga digunakan untuk menunjukkan atau menyembunyikan elemen DOM berdasarkan syarat yang diberikan. Penggunaannya adalah serupa dengan v-if, tetapi perbezaannya ialah v-show hanya menyembunyikan dan memaparkan elemen dengan mengubah suai atribut paparan elemen, dan bukannya memasukkan atau memadamkan elemen.

Contoh kod:

<template>
  <div>
    <div v-show="showMessage">Hello World!</div>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

Begitu juga, dengan mengklik butang untuk menukar nilai showMessage, kita boleh mengawal paparan dan penyembunyian Hello World!.

3. v-else
   Arahan v-else digunakan untuk menjadikan elemen DOM dalam blok else apabila syarat arahan v-if atau v-show tidak dipenuhi. Ambil perhatian bahawa v-else mesti segera mengikut arahan v-if atau v-show di bawah elemen induk yang sama.

Contoh kod:

<template>
  <div>
    <div v-if="showMessage">Hello World!</div>
    <div v-else>Goodbye World!</div>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

Berdasarkan contoh di atas, apabila nilai showMessage adalah palsu, "Selamat tinggal Dunia!"

4. v-else-if
   Arahan v-else-if digunakan untuk menentukan syarat lain dan menjadikan elemen DOM yang sepadan apabila syarat arahan v-if atau v-show tidak dipenuhi. Juga ambil perhatian bahawa v-else-if mesti mengikut arahan v-if atau v-show dan terletak di bawah elemen induk yang sama.

Contoh kod:

<template>
  <div>
    <div v-if="messageType === 'success'">Success!</div>
    <div v-else-if="messageType === 'warning'">Warning!</div>
    <div v-else-if="messageType === 'error'">Error!</div>
    <div v-else>Info!</div>
    <button @click="changeMessageType">Change Message Type</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageType: 'success'
    };
  },
  methods: {
    changeMessageType() {
      if (this.messageType === 'success') {
        this.messageType = 'warning';
      } else if (this.messageType === 'warning') {
        this.messageType = 'error';
      } else if (this.messageType === 'error') {
        this.messageType = '';
      } else {
        this.messageType = 'success';
      }
    }
  }
};
</script>

Dalam contoh di atas, dengan mengklik pada butang, kita boleh mengulangi pelbagai jenis mesej.

Ringkasan:
Dalam artikel ini, kami memperkenalkan penggunaan arahan v-if, v-show, v-else, dan v-else-if dalam Vue melalui contoh kod khusus. Arahan ini memberikan kami cara yang fleksibel untuk mengawal elemen DOM, membolehkan kami memaparkan halaman secara dinamik mengikut keadaan yang berbeza. Menguasai penggunaan arahan ini akan membantu kami membina antara muka pengguna yang kompleks dengan lebih baik.

Rujukan:

• Vue.js dokumentasi rasmi: https://vuejs.org/

Atas ialah kandungan terperinci Aplikasi lanjutan Vue: Penggunaan praktikal v-if, v-show, v-else, v-else-if untuk mencapai pemaparan bersyarat yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!