Conditional rendering artinya menampilkan sebagian template hanya kalau sebuah syarat terpenuhi. Bayangin dinding menu Warung Bu Sri. Waktu Mie Ayam habis, Bu Sri bisa melakukan dua hal: mencopot kartu Mie Ayam dari dinding lalu menggantungkan kartu "Habis", atau membiarkan kartunya tergantung tapi menutupinya dengan kain. Di Vue, mencopot kartu itu v-if, menutup dengan kain itu v-show.
🧪 Tebakan cepat: Stok Mie Ayam
0. Template berisi<p v-if="stok > 0">Tersedia (v-if)</p>dan<p v-show="stok > 0">Tersedia (v-show)</p>. Kalau kamu buka DevTools, ada berapa<p>di DOM? Tebak dulu, jawabannya ada di bagian "v-if atau v-show".
v-if dan v-else: pilih satu dari dua
const stok = ref(0)
---template---
<h3>Mie Ayam</h3>
<p v-if="stok > 0">Tersedia: {{ stok }} porsi</p>
<p v-else>Habis</p>
stok |
Hasil render di DOM |
|---|---|
| 0 | <h3>Mie Ayam</h3><p>Habis</p> |
| 5 | <h3>Mie Ayam</h3><p>Tersedia: 5 porsi</p> |
v-ifadalah directive, atribut khusus Vue berawalanv-, sama sepertiv-htmldi pelajaran template. Isinya ekspresi JavaScript. Kalau hasilnya truthy, elemennya dipasang. Kalau falsy (false,0,"",null,undefined), elemennya gak dibuat sama sekali.v-elsegak punya nilai. Dia berlaku persis saatv-ifdi atasnya gagal, dan wajib ditulis di elemen yang tepat sesudahnya.- Yang ada di DOM cuma satu cabang. Karena itu dua cabang boleh memakai id yang sama. Latihan pertama menulis
<p id="msg" v-if="isLoggedIn">Selamat datang!</p>lalu<p id="msg" v-else>Silakan login.</p>. DenganisLoggedInbernilaitrue, yang tampil cumaSelamat datang!. Tombol#toggledi kode awal membalikisLoggedIn, dan sesudah diklik yang tampilSilakan login. - Begitu
stok.valueberubah, Vue memeriksa syaratnya lagi dan menukar cabangnya sendiri. - Ternary dari pelajaran template,
{{ stok > 0 ? "Ada" : "Habis" }}, cukup untuk mengganti teks.v-ifdipakai untuk memasang atau membuang elemen.
v-else-if: lebih dari dua cabang
const stok = ref(3)
---template---
<p v-if="stok >= 10">Masih banyak</p>
<p v-else-if="stok > 0">Tinggal {{ stok }} porsi</p>
<p v-else>Habis</p>
stok |
Cabang yang dipasang |
|---|---|
| 12 | Masih banyak |
| 3 | Tinggal 3 porsi |
| 0 | Habis |
- Vue memeriksa dari atas. Cabang pertama yang syaratnya benar dipasang, sisanya dilewati.
stok12 cuma tampil "Masih banyak", walau12 > 0juga benar. - Karena itu syarat yang paling ketat ditulis duluan.
- Latihan kedua memakai pola yang sama:
nilai85,v-if="nilai >= 80"berbunyiA,v-else-if="nilai >= 60"berbunyiB,v-elseberbunyiC. Ketiga paragrafnya memakaiid="grade", dan yang tampilA. Kode awal juga punya<input id="nilai">: ketik65atau60, tampilB; ketik40, tampilC.
Satu syarat untuk beberapa elemen: <template v-if>
const stok = ref(3)
---template---
<template v-if="stok > 0">
<p>Tersedia: {{ stok }} porsi</p>
<button>Pesan</button>
</template>
<p v-else>Habis</p>
<template>adalah pembungkus yang gak ikut dirender. Denganstok3, DOM-nya cuma<p>dan<button>, tanpa elemen pembungkus.
v-if atau v-show
const stok = ref(0)
---template---
<p v-if="stok > 0">Tersedia (v-if)</p>
<p v-show="stok > 0">Tersedia (v-show)</p>
Hasil render dengan stok 0:
<!--v-if-->
<p style="display: none;">Tersedia (v-show)</p>
Cuma satu <p>, dan itu milik v-show. Itu jawaban tebakannya. v-if gak membuat elemennya sama sekali. Vue cuma meninggalkan komentar sebagai penanda tempat: <!--v-if--> di build development, <!----> di build production seperti Playground. v-show selalu membuat elemennya, lalu menyembunyikannya dengan CSS display: none.
v-if |
v-show |
|
|---|---|---|
| Syaratnya salah | elemen gak ada di DOM | elemen ada, display: none |
| Syaratnya berganti | elemen dibuang, lalu dibuat ulang | cuma display-nya diganti |
| Ketikan di input di dalamnya | hilang | tetap |
Dipasangkan dengan v-else atau <template> |
bisa | gak bisa |
| Cocok untuk | jarang berganti, atau cuma untuk sebagian orang | sering bolak-balik, misalnya tab |
- Misalnya kotak pesanan berisi input catatan. Dengan
v-if, ketik "pedas", habiskan stok, lalu tambah lagi: input-nya kosong, karena yang tampil elemen baru. Denganv-show, kotaknya cuma ditutup, jadi "pedas" masih ada. v-showtetap membuat elemennya walau dari awal tersembunyi.v-ifyang dari awal salah gak membuat apa-apa.
⚠️ Jebakan yang sering ketemu
v-elseyang gak nempel. Ada elemen lain di antarav-ifdanv-else, atauv-elsedipasang sesudahv-show. Build development menulis[Vue warn]: Template compilation error: v-else/v-else-if has no adjacent v-if or v-else-if.Playground memakai build production, jadi yang muncul cuma error berisi alamathttps://vuejs.org/error-reference/#compiler-30, dan komponennya gak tampil sama sekali.- Tiga
v-ifterpisah.v-if="nilai >= 80",v-if="nilai >= 60",v-if="nilai < 60"dengan nilai 85 menampilkanAdanB, karena tiapv-ifdiperiksa sendiri-sendiri. Rantai denganv-else-ifdanv-elsesupaya cuma satu yang menang. Latihan memeriksa bahwa cuma satu<p>yang tampil. v-showuntuk cabang yang harus hilang. Dua paragraf denganv-showtetap dua-duanya ada di DOM, satu tersembunyi. Latihan sapaan minta cabang yang gak terpakai benar-benar hilang, jadi pakaiv-ifdanv-else.- Lupa bahwa
v-ifmembuat ulang. Isian form di dalam blokv-ifhilang setiap kali bloknya disembunyikan. Kalau isiannya harus bertahan, pakaiv-show.
TL;DR: v-if="syarat" memasang elemen hanya saat syaratnya benar; saat salah, elemennya gak ada di DOM. v-else-if dan v-else menyusul dalam satu rantai, wajib nempel tepat sesudahnya, dan cuma cabang pertama yang benar yang dipasang. <template v-if> membungkus beberapa elemen tanpa ikut dirender. v-show selalu membuat elemennya dan menyembunyikannya dengan display: none, jadi isinya bertahan dan cocok untuk yang sering bolak-balik, tapi gak bisa dipasangkan dengan v-else. Jadi v-if="false" menghapus elemen, v-show="false" menyembunyikannya.
