Vue.js adalah perpustakaan yang mudah dipelajari dan didekati sehingga kita dapat mulai membangun aplikasi web di dalamnya dengan pengetahuan dasar pengembangan web. Di Vue.js, pengembang suka membuat kode dan merasakan kebebasan saat mengembangkan aplikasi.

Dalam aplikasi web dinamis apa pun, rendering bersyarat adalah bagian penting. Vue.js menyediakan cara berbeda untuk rendering bersyarat, dan kita dapat menggunakan salah satu cara berikut yang sesuai dengan tujuan kita:

• v-show
• v-jika
• v-lain

Pada artikel ini, kami akan mencoba arahan yang disediakan oleh Vue.js untuk rendering bersyarat dan memahaminya dengan cara yang lebih baik.

v-show

V-show hanya menyembunyikan elemen dengan menonaktifkan visibilitasnya. Itu menyembunyikan elemen jika nilai dari ekspresi atau variabel yang diteruskan tidak benar.

Sebagai contoh:

Paragraf ini tidak disembunyikan

Paragraf ini disembunyikan

v-jika

Di sisi lain, v-if tidak menyembunyikan elemen, tetapi juga tidak merender apa pun sampai nilai ekspresi atau variabel yang diteruskan menjadi true.

Sebagai contoh:

Ada fitur tambahan di direktif v-if dibandingkan dengan direktif v-show. Kita dapat menerapkannya ke blok template juga jika kita tidak ingin merender apa pun di antara blok itu. Entah ada komponen anak di dalamnya atau banyak elemen lainnya.

Sebagai contoh:

v-lain

Kita juga dapat menggunakan direktif v-else bersama dengan pernyataan v-if untuk merender secara kondisional di antara salah satu dari dua blok. Namun, perlu diingat bahwa blok v-else harus muncul tepat setelah blok v-if.

Sebagai contoh:

Paragraf ini akan dirender jika 'isVar' menjadi true

Jika tidak, paragraf ini akan dirender.

Kita dapat menerapkan v-else pada blok template juga.

v-else-if

Sama seperti v-else, kita juga dapat menggunakan direktif v-else-if bersama dengan direktif v-if.

Sebagai contoh:

v-jika vs. v-show

Jenis v-if dan v-show melakukan tugas yang sama. Keduanya menyembunyikan elemen di DOM berdasarkan nilai benar atau salah dari ekspresi yang diteruskan, tetapi dengan perbedaan halus menyembunyikan dan tidak merender elemen.

Jika kita membandingkan waktu dan biaya pemrosesan antara keduanya. Biaya v-if lebih mahal selama runtime atau toggling, sementara v-show lebih mahal di awal rendering. Jadi, akan lebih bijaksana untuk menggunakan v-show saat toggling adalah tujuan. Jika tidak, v-jika lebih disukai.

Membungkus

Dalam artikel ini, kita telah mempelajari cara merender DOM secara kondisional di Vue.js menggunakan arahan v-if dan v-else. Kami telah menunjukkan beberapa contoh dan belajar tentang perbedaan nyata antara v-show dan v-if directive. Jika artikel ini membantu Anda untuk memiliki pemahaman dan konsep yang lebih baik, kunjungi terus linuxhint.com untuk konten yang bermanfaat useful.