Cara Menerapkan Rendering Bersyarat di Vue.js
Table of content:
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.
Baca Juga:
Arahan adalah bagian mendasar dari Vue.js dan menyediakan cara sederhana dan kuat untuk memanipulasi Model Objek Dokumen (DOM), menambahkan perilaku dinamis ke elemen, dan mengelola 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-untukDan v-jika.
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 perenderan bersyarat dalam aplikasi Anda, berbeda dari cara Anda merender konten secara bersyarat di React.js.
Mencapai Rendering Bersyarat Dengan Arahan v-if
Mirip dengan JavaScript jika… lain pernyataan, yang 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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 v-if='false' >{{ message1 }}</h1>
<h1 v-else >{{ message2 }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
message1: 'This is your Vue App.',
message2: 'Not Yet a Vue App.'
}
}
}) app.mount('#app')
</script>
</body>
</html>
Blok kode di atas menggambarkan aplikasi Vue yang dibuat dengan menambahkan tautan Content Delivery Network (CDN) ke badan 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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'This is your Vue App.'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
}) app.mount('#app')
</script>
</body>
</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:
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1 v-show="showUsers">{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'These are the users of the Vue app'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
}) app.mount('#app')
</script>
</body>
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 kontrol lebih besar atas tampilan dan perilaku komponen Vue Anda.
Artikel Terkait
