Rendering/Tampilan Bersyarat di Vue dengan v-if, v-show, v-else dan v-else-if

Pengantar

Vue.js adalah kerangka kerja aplikasi web sederhana untuk membuat antarmuka web dinamis dan Aplikasi Satu Halaman (SPA). Saat kami membuat aplikasi ini, seringkali, kami ingin membuat sesuatu berdasarkan kriteria tertentu – ini adalah inti dari rendering bersyarat.

Render bersyarat mengacu pada kemampuan untuk membuat markup antarmuka pengguna (UI) yang berbeda berdasarkan apakah suatu kondisi benar atau tidak. Gagasan ini sering digunakan dalam konteks seperti menampilkan atau menyembunyikan komponen (beralih), beralih fungsi aplikasi, menangani otentikasi dan otorisasi, dan banyak lagi.

Dalam artikel ini, kita akan melihat berbagai cara rendering bersyarat di Vue.js dengan menggunakan v-if, v-else-if, dan v-else arahan. Kami juga akan melihat beberapa contoh dan menyoroti perbedaan antara v-if dan v-show.

v-jika

Grafik v-if direktif digunakan untuk membuat blok secara kondisional artinya blok dengan v-if atribut hanya akan menjadi diproduksi jika ekspresi direktif mengembalikan a true nilai. Jika ekspresi menghasilkan hasil yang tidak valid (misalnya, null, 0, string kosong, false), elemennya adalah dihapus dari DOM.

Mari kita ilustrasikan perilaku ini pada contoh praktis:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Sejak login diatur ke true, yang <div> blok berisi v-if direktif akan diproduksi, sehingga ditampilkan.

v-jika vs v-pertunjukan

Perlu dicatat bahwa v-show juga akan bekerja dalam contoh di atas dan akan berfungsi tampaknya identik, tetapi ada perbedaan antara keduanya.

v-if render bersyarat suatu unsur, sedangkan v-show menunjukkan/menampilkan secara kondisional sebuah elemen.

Ini menyiratkan bahwa ketika kondisional diaktifkan, v-if akan benar-benar menghapus dan memulihkan komponen saat v-show hanya membuat mereka tidak terlihat atau terlihat. Animasi berikut menggambarkan bagaimana v-if sebenarnya menghapus dan mereproduksi blok kode:

Sementara itu, v-show akan selalu mempertahankan elemen di DOM dan hanya akan mengubah CSS-nya untuk mengubah tampilannya (dengan menyetelnya display untuk none):

v-lain

Grafik v-else direktif adalah v-if direktif yang memungkinkan Anda untuk menyesuaikan false nilai dalam rendering bersyarat. Jika tidak true, Anda dapat menggunakan v-else untuk menentukan apa yang seharusnya terjadi.

Misalnya, anggap kita memiliki input kata sandi, dan kita ingin itu menghasilkan pesan kesalahan, "Kata kunci lemah", jika panjang input kurang dari 6 atau tampilan “Kata Sandi Kuat” jika panjangnya lebih dari 6.

Ini adalah render bersyarat, dengan opsi untuk menangani kasus palsu:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Mari kita gunakan ini untuk beralih isi halaman login sederhana sehingga mengubah pesan berdasarkan apakah pengguna login atau tidak. Kami akan memodifikasi kata-kata tombol berdasarkan userLoggedIn statusnya juga:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Acara klik tombol akan mengaktifkan userLoggedIn item data, dan ini akan mempengaruhi data yang ditampilkan seperti yang terlihat di bawah ini:

v-lain-jika

v-else-if extends a v-if dengan else...if memblokir. Ini mirip dengan JavaScript else...if blok karena memungkinkan kita untuk menambahkan pernyataan if ke yang sudah ada v-if. Ini digunakan ketika ada banyak kriteria untuk diperiksa dan dapat dirantai beberapa kali:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Kesimpulan

Dalam artikel ini, kita telah melihat cara merender elemen secara kondisional dengan v-if, v-else, dan v-else-if. Kami juga menjelaskan perbedaan antara v-if dan v-show.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/