Vue

Conditional Rendering: v-if, v-else, v-show

Penjelasan

v-if (dipasangkan v-else-if/v-else) menampilkan atau menghilangkan elemen SEPENUHNYA dari DOM berdasarkan kondisi — cocok untuk kondisi yang jarang berubah. v-show TETAP merender elemennya di DOM tapi mengatur CSS display:none saat false — lebih murah untuk kondisi yang SERING berubah karena tidak perlu render ulang elemen dari nol.

Contoh Konsep

<script setup>
import { ref } from 'vue';

const sudahBayar = ref(false);
const tampilkanDetail = ref(true);
</script>

<template>
    <p v-if="sudahBayar">Pesanan sudah dibayar</p>
    <p v-else>Menunggu pembayaran</p>

    <div v-show="tampilkanDetail">Detail pesanan di sini (sering di-toggle)</div>
</template>

Praktikum

Buat ref() stok (number). Pakai v-if/v-else untuk menampilkan "Tersedia" atau "Habis" sesuai nilai stok (>0 atau tidak). Tambahkan juga elemen dengan v-show yang mengatur tampil/sembunyi lewat ref() boolean terpisah bernama tampilkanPeringatan.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Aturan praktis memilih: pakai v-show untuk elemen yang sering di-toggle tampil/sembunyi (mis. dropdown, modal) supaya tidak render ulang berulang kali, dan v-if untuk kondisi yang jarang berubah atau elemen yang MAHAL untuk di-render (supaya tidak selalu ada di DOM kalau tidak perlu).

← Kembali Event Handling di Vue Lanjutkan → List Rendering: v-for