Panduan praktikal untuk pemaparan bersyarat Vue: penerangan terperinci tentang teknik penggunaan v-if, v-show, v-else, v-else-if

Panduan Praktikal Render Bersyarat Vue: Penjelasan terperinci tentang teknik penggunaan v-if, v-show, v-else, v-else-if

Vue.js ialah JavaScript sumber terbuka yang digunakan untuk membina hadapan interaktif- Rangka Kerja antara muka akhir yang menyediakan arahan pemaparan bersyarat yang fleksibel untuk menunjukkan atau menyembunyikan elemen tertentu berdasarkan keadaan yang berbeza. Dalam Vue, v-if, v-show, v-else, v-else-if ialah salah satu arahan pemaparan bersyarat yang biasa kami gunakan. Artikel ini memperincikan penggunaan arahan ini dan menyediakan contoh kod yang sepadan.

1. v-if dan v-else

Arahan v-if digunakan untuk menghasilkan elemen khusus berdasarkan syarat. Jika syarat adalah benar, elemen akan diberikan, jika syarat adalah palsu, elemen tidak akan diberikan.

Contoh 1: l & lt;

& lt; a data () {

<h1 v-if="show">Hello, World!</h1>
<p v-else>Sorry, the element is hidden.</p>

} }

Dalam contoh di atas, mengikut nilai pembolehubah tunjukkan, jika tunjukkan adalah benar, teks dalam elemen "h1" akan dipaparkan tunjukkan adalah palsu, teks dalam elemen "p" akan dipaparkan. Arahan

v-else digunakan selepas v-if dan boleh digunakan serta-merta dalam tag yang sama untuk menyatakan keadaan yang bertentangan dengan v-if.

Contoh 2: l & lt;

& lt; {a data () {

return {
  show: true
}

} }

Dalam contoh di atas, apabila nilai show adalah benar, teks dalam elemen "h1" dipaparkan apabila nilai show adalah palsu , teks dalam elemen "h3" dipaparkan.

v-show

Arahan v-show adalah serupa dengan v-if dan juga digunakan untuk mengawal paparan dan penyembunyian elemen dalam keadaan tertentu. Perbezaannya ialah v-show menggunakan atribut paparan CSS untuk menukar paparan dan menyembunyikan elemen dan bukannya memadam atau menambah elemen secara langsung.

Contoh 3: templat & lt;

& lt; a data () {

<h1 v-if="show">Hello, World!</h1>
<h3 v-else>Title</h3>

} }

Dalam contoh di atas, apabila nilai show adalah benar, teks dalam elemen "h1" dipaparkan apabila nilai show adalah palsu, teks dalam elemen "p" dipaparkan.

v-else-if

Arahan v-else-if adalah serupa dengan arahan v-else, tetapi ia membolehkan kami menetapkan beberapa syarat berturut-turut. Ia amat berguna apabila menggunakan arahan v-if dan arahan v-else.

Contoh 4: l & lt;
2. & lt; a data () {

return {
  show: true
}

} }

Dalam contoh di atas, tahap teks yang berbeza dipaparkan berdasarkan nilai skor pembolehubah. Mengikut nilai skor, mula-mula tentukan sama ada ia lebih besar daripada atau sama dengan 90. Jika ya, paparkan teks dalam elemen "h1" Jika tidak, tentukan sama ada ia lebih besar daripada atau sama dengan 80. Jika ya, paparkan teks dalam elemen "h2", dan sebagainya.

Ringkasnya, v-if, v-show, v-else, v-else-if biasanya digunakan arahan pemaparan bersyarat dalam Vue.js. Pilih arahan yang hendak digunakan untuk mencapai kesan yang diingini berdasarkan situasi sebenar dan anda boleh menunjukkan atau menyembunyikan elemen mengikut keperluan. Apabila menulis kod, penggunaan rasional arahan ini boleh mengoptimumkan struktur kod dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Saya harap artikel ini akan membantu anda dalam pembangunan Vue.

(Nota: Contoh kod di atas adalah untuk rujukan sahaja, sila ubah suai mengikut situasi sebenar semasa menggunakannya)

Atas ialah kandungan terperinci Panduan praktikal untuk pemaparan bersyarat Vue: penerangan terperinci tentang teknik penggunaan v-if, v-show, v-else, v-else-if. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!