Vue.js adalah perpustakaan yang mudah dipelajari dan didekati sehingga kita dapat mula membina aplikasi web di dalamnya dengan pengetahuan asas mengenai pengembangan web. Di Vue.js, pembangun gemar membuat kod dan merasakan kebebasan semasa mengembangkan aplikasi.

Dalam mana-mana aplikasi web yang dinamik, rendering bersyarat adalah bahagian yang perlu. Vue.js menyediakan cara yang berbeza untuk rendering bersyarat, dan kami dapat menggunakan salah satu cara berikut yang sesuai dengan tujuan kami:

• tayangan v
• v-jika
• v-lain

Dalam artikel ini, kami akan mencuba arahan yang diberikan oleh Vue ini.js untuk membuat bersyarat dan memahaminya dengan cara yang lebih baik.

tayangan v

Rancangan-v hanya menyembunyikan elemen dengan melumpuhkan keterlihatannya. Ia menyembunyikan elemen jika nilai ungkapan atau pemboleh ubah yang dilalui tidak benar.

Sebagai contoh:

Perenggan ini tidak disembunyikan

Perenggan ini disembunyikan

v-jika

Sebaliknya, v-if tidak menyembunyikan elemen, tetapi juga tidak memberikan apa-apa sehingga nilai ungkapan atau pemboleh ubah yang dilalui menjadi benar.

Sebagai contoh:

Terdapat ciri tambahan dalam arahan v-if dibandingkan dengan arahan v-show. Kita boleh menerapkannya ke blok templat juga jika kita tidak mahu membuat apa-apa di antara blok itu. Sama ada terdapat komponen anak dalam itu atau banyak elemen lain.

Sebagai contoh:

v-lain

Kita juga dapat menggunakan arahan v-else bersama dengan pernyataan v-if untuk membuat syarat antara kedua blok tersebut secara bersyarat. Tetapi, perlu diingat bahawa blok v-else mesti muncul tepat selepas blok v-if.

Sebagai contoh:

Perenggan ini akan dinyatakan sekiranya 'isVar' menjadi kenyataan

Jika tidak, perenggan ini akan diberikan.

Kita juga boleh menggunakan v-else pada blok templat.

v-lain-jika

Sama seperti v-else, kita juga boleh menggunakan arahan v-else-if bersama dengan arahan v-if.

Sebagai contoh:

v-jika vs. tayangan v

Jenis v-if dan v-show melakukan tugas yang sama. Mereka berdua menyembunyikan unsur-unsur dalam DOM berdasarkan nilai yang benar atau salah dari ungkapan yang dilewatkan, tetapi dengan perbezaan yang tersembunyi dan tidak memberikan unsur.

Sekiranya kita membandingkan masa dan kos pemprosesan antara kedua-duanya. V-if berharga lebih banyak semasa runtime atau togol, sementara v-show lebih mahal pada permulaan rendering. Jadi, adalah bijak jika menggunakan v-show ketika beralih adalah tujuan. Jika tidak, v-if lebih disukai.

Mengakhiri

Dalam artikel ini, kami telah belajar bagaimana membuat DOM secara bersyarat di Vue.js menggunakan arahan v-if dan v-else. Kami telah menunjukkan beberapa contoh dan mengetahui perbezaan sebenar antara arahan v-show dan v-if. Sekiranya artikel ini membantu anda untuk mempunyai pemahaman dan konsep yang lebih baik, teruskan mengunjungi linuxhint.com untuk kandungan berguna seperti itu.