Render bersyarat adalah bagian penting dari templating dalam bahasa apa pun. Temukan pendekatan Vue.js.

Vue.js adalah framework JavaScript populer yang memudahkan pembuatan aplikasi web dinamis. Vue.js dapat merender konten berdasarkan data dan peristiwa. Ini sangat berguna untuk membuat antarmuka pengguna yang responsif dan interaktif.

Pelajari apa itu direktif Vue dan bagaimana menggunakannya untuk mencapai rendering bersyarat di Vue.js.

Apa itu Arahan Vue?

Arahan Vue memungkinkan Anda untuk meningkatkan perilaku elemen HTML di template Vue.js dengan menambahkan atribut unik ke dalamnya.

Direktif adalah bagian mendasar dari Vue.js dan menyediakan cara sederhana dan kuat untuk memanipulasi Model Objek Dokumen (DOM), tambahkan perilaku dinamis ke elemen, dan kelola data.

Selain itu, Vue.js memungkinkan Anda membuat arahan khusus, memungkinkan Anda membuat fungsi yang dapat digunakan kembali untuk aplikasi Vue dengan mudah.

Framework Vue mengawali arahannya dengan "v-" sebelum nama direktif. Contoh arahan yang umum digunakan di Vue termasuk v-on, v-bind, v-untuk, Dan v-jika.

instagram viewer

Apa Itu Rendering Bersyarat?

Render bersyarat memungkinkan Anda untuk menampilkan atau menyembunyikan elemen berdasarkan kondisi yang Anda tentukan. Misalnya, Anda dapat menggunakan perenderan bersyarat untuk menampilkan pesan kepada pengguna hanya jika mereka telah memasukkan alamat email yang valid.

Di Vue.js, Anda dapat menggunakan arahan seperti v-jika Dan v-show untuk mencapai rendering bersyarat dalam aplikasi Anda, berbeda dari yang Anda inginkan merender konten secara kondisional di React.js.

Mencapai Rendering Bersyarat Dengan Arahan v-if

Mirip dengan JavaScript jika... lain penyataan, itu v-jika direktif di Vue.js memiliki syarat. Jika tidak terpenuhi, Vue.js akan mengevaluasi kondisi berikut yang ditentukan dalam a v-else direktif dan terus melakukannya sampai memenuhi kondisi atau mengevaluasi semua kondisi.

Arahan ini memungkinkan Anda merender elemen secara kondisional berdasarkan nilai boolean. Kompiler Vue.js tidak akan merender bagian jika nilainya salah.

Berikut adalah contoh rendering konten secara kondisional v-jika:

html>
<htmllang="en">
<kepala>
<judul>Dokumenjudul>
<naskahsrc=" https://unpkg.com/vue@3/dist/vue.global.js">naskah>
kepala>
<tubuh>
<divpengenal="aplikasi">
<h1v-jika='PALSU' >{{ pesan1 }}h1>
<h1v-else >{{ pesan2 }}h1>
div>
<naskah>
 aplikasi const = Vue.createApp({
 data() {
 kembali {
 message1: 'Ini adalah Aplikasi Vue Anda.',
 message2: 'Belum Menjadi Aplikasi Vue.'
 }
 }
 })
 app.mount('#app')
naskah>
tubuh>
html>

Blok kode di atas menggambarkan aplikasi Vue yang dibuat dengan menambahkan a Jaringan Pengiriman Konten (CDN) link ke tubuh file HTML Anda. Arahan v-if akan merender elemen h1 hanya jika kondisinya benar.

Di aplikasi Vue, ada situasi di mana Anda perlu merender komponen berdasarkan kriteria dinamis tertentu. Ini berguna dalam skenario seperti menampilkan informasi hanya saat pengguna mengklik tombol atau menampilkan indikator pemuatan saat data dimuat dari API.

Misalnya:

html>
<htmllang="en">
<kepala>
<judul>Aplikasi Vuejudul>
<naskahsrc=" https://unpkg.com/vue@3/dist/vue.global.js">naskah>
kepala>
<tubuh>
<divpengenal="aplikasi">
<divv-jika="tampilkan Pengguna">
<ul>
<li>Pengguna1li>
<li>Pengguna2li>
ul>
div>
<tombolv-on: klik="toggleShowUsers()">
 Alihkan Pengguna
tombol>
<h1>{{ pesan }}h1>
div>
<naskah>
 aplikasi const = Vue.createApp({
 data() {
 kembali {
 showUsers: benar,
 pesan: 'Ini adalah Aplikasi Vue Anda.'
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
naskah>
tubuh>
html>

Blok kode di atas menggunakan v-jika direktif untuk merender konten secara kondisional berdasarkan nilai variabel boolean, showUsers.

Itu div elemen ditampilkan jika nilainya BENAR dan tersembunyi jika itu PALSU. Mengklik Alihkan Pengguna tombol memicu toggleShowUsers() metode untuk mengubah nilai showUsers.

Contoh ini juga menggunakan v-on direktif untuk mendengarkan acara, seperti acara klik pada tombol. Ini mengevaluasi kembali v-jika direktif kapanpun nilai dari showUsers perubahan.

Mencapai Rendering Bersyarat Dengan Arahan v-show

Itu v-show direktif adalah cara lain untuk menampilkan atau menyembunyikan elemen di Vue.js secara kondisional. Hal ini mirip dengan v-jika direktif yang dapat merender elemen berdasarkan ekspresi Boolean. Namun, ada beberapa perbedaan kritis antara kedua arahan tersebut.

Itu v-show direktif tidak menghapus elemen dari DOM saat ekspresi bernilai false. Sebagai gantinya, ia menggunakan CSS untuk mengaktifkan elemen menampilkan properti antara tidak ada dan nilai aslinya.

Ini berarti elemen tersebut masih ada di DOM tetapi tidak terlihat saat ekspresi salah.

Berikut contohnya:

<tubuh>
<divpengenal="aplikasi">
<divv-jika="tampilkan Pengguna">
<ul>
<li>Pengguna1li>
<li>Pengguna2li>
ul>
div>
<tombolv-on: klik="toggleShowUsers()">
 Alihkan Pengguna
tombol>
<h1v-show="tampilkan Pengguna">{{ pesan }}h1>
div>
<naskah>
 aplikasi const = Vue.createApp({
 data() {
 kembali {
 showUsers: benar,
 pesan: 'Ini adalah pengguna aplikasi Vue'
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
naskah>
tubuh>

Blok kode di atas menggunakan v-show direktif untuk menampilkan pesan yang menyatakan, 'Ini adalah pengguna aplikasi Vue’ kapan saja Anda mengklik tombol sakelar.

Memilih Antara v-if dan v-show

Ketika memutuskan antara menggunakan v-jika Dan v-show direktif untuk menampilkan atau menyembunyikan elemen di Vue.js secara kondisional, ada beberapa faktor penting yang perlu dipertimbangkan.

Saat kondisi jarang berubah, gunakan the v-jika direktif itu baik. hal ini dikarenakan v-jika menghapus elemen dari DOM saat kondisi salah, yang dapat menghambat performa optimal. Elemen hanya dirender setelah kondisi menjadi benar dan dihapus dari DOM saat kondisi menjadi salah lagi.

Di sisi lain, jika kondisi cenderung sering berubah, sebaiknya gunakan the v-show direktif, yang meningkatkan kinerja. hal ini dikarenakan v-show menggunakan CSS untuk menyembunyikan atau menampilkan elemen dengan mengalihkan properti tampilan CSS antara tidak ada dan memblokir, membuat elemen selalu dirender ke DOM.

Rendering Bersyarat di Aplikasi Vue Anda Menjadi Mudah

Anda telah belajar merender konten secara kondisional di aplikasi Vue dengan direktif v-if dan v-show. Dengan memanfaatkan arahan ini, Anda dapat merender konten dengan cepat berdasarkan berbagai kondisi, memberi Anda lebih banyak kontrol atas tampilan dan perilaku komponen Vue Anda.