Cara menggunakan v-if dan v-else digabungkan untuk mencapai pemaparan dwi bersyarat dalam Vue

Vue ialah rangka kerja bahagian hadapan yang sangat baik Ia mudah dipelajari, cekap, fleksibel dan berskala, jadi ia disukai secara meluas oleh pembangun bahagian hadapan. Dalam Vue, v-if dan v-else ialah dua arahan yang biasa digunakan Ia boleh membantu kami menghasilkan kandungan yang berbeza dalam keadaan yang berbeza. Artikel ini akan memperkenalkan cara menggunakan v-if dan v-else untuk mencapai pemaparan dwi bersyarat dalam Vue.

1. v-if dan v-else

Dalam Vue, v-if ialah arahan untuk penghakiman bersyarat. Contohnya:

<div v-if="isShow">这是一个显示区域</div>

Apabila isShow adalah benar, div ini akan dipaparkan; apabila isShow palsu, div ini akan dialih keluar daripada DOM.

v-else ialah arahan tambahan kepada v-if, yang digunakan untuk menjadikan elemen lain apabila syarat v-if adalah palsu. Contohnya:

<div v-if="isShow">这是一个显示区域</div>
<div v-else>这是一个隐藏区域</div>

Apabila isShow adalah benar, div pertama akan dipaparkan, dan div kedua akan disembunyikan apabila isShow palsu, div pertama akan disembunyikan, dan div kedua akan disembunyikan. Div akan diberikan.

2. Gunakan v-if dan v-else untuk mencapai pemaparan dwi bersyarat

Kadangkala, kita perlu menghasilkan kandungan yang berbeza berdasarkan dua syarat, kemudian kita boleh menggunakan v-if Combined dengan v -selain itu, pemaparan dwi bersyarat dicapai. Sebagai contoh: Kami perlu memaparkan kandungan yang berbeza berdasarkan jantina dan umur pengguna Jika pengguna lelaki dan berumur lebih daripada 30 tahun, kami memberikan "Anda telah memasuki usia pertengahan", jika tidak, kami memaparkan "Anda masih muda".

Pertama, kita perlu menentukan dua pembolehubah dalam contoh Vue, jantina dan umur masing-masing mewakili jantina dan umur pengguna.

data() {
  return {
    gender: 'male',
    age: 25
  }
}

Kemudian, anda boleh menulis ini dalam templat:

<div v-if="gender === 'male' && age > 30">您已经步入中年</div>
<div v-else>您还年轻</div>

Jika jantina lelaki dan umur lebih daripada 30 tahun, div pertama akan dipaparkan jika tidak, div kedua akan dipaparkan keluar.

3. Ringkasan

Menggunakan v-if dan v-else digabungkan dengan mudah boleh mencapai pemaparan dwi bersyarat. Dalam pembangunan sebenar, kita boleh menggunakan arahan Vue secara munasabah mengikut keperluan untuk mencapai keperluan yang berbeza. Pada masa yang sama, kami juga perlu memberi perhatian kepada penggunaan arahan dan isu prestasi, mengoptimumkan kod secara munasabah, dan meningkatkan prestasi halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menggunakan v-if dan v-else digabungkan untuk mencapai pemaparan dwi bersyarat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!