Conditional Rendering — Vue

v-if / v-else const isLoggedIn = ref(true) ---template--- Selamat datang! Silakan login. v-else-if const score = ref(85) ---template--- A B C D v-show const vis

v-if / v-else

const isLoggedIn = ref(true)

---template---
<p v-if="isLoggedIn">Selamat datang!</p>
<p v-else>Silakan login.</p>

v-else-if

const score = ref(85)

---template---
<p v-if="score >= 90">A</p>
<p v-else-if="score >= 80">B</p>
<p v-else-if="score >= 70">C</p>
<p v-else>D</p>

v-show

const visible = ref(true)

---template---
<p v-show="visible">Teks ini bisa disembunyikan</p>

v-if vs v-show

v-if v-show
Cara kerja Tambah/hapus dari DOM Toggle CSS display
Cost awal Rendah Tinggi (selalu render)
Cost toggle Tinggi (re-render) Rendah (CSS saja)
Kapan pakai Jarang berubah Sering toggle

Yang akan kamu pelajari