• Apa Itu Conditional Rendering?
• Menggunakan v-if
• v-else-if dan v-else
• Menggunakan v-show
• Perbedaan v-if vs v-show
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Event Handling di Vue, bagaimana cara merespons interaksi pengguna seperti klik, input, dan submit form.

Pada artikel kali ini, kita akan membahas tentang Conditional Rendering, yaitu cara menampilkan atau menyembunyikan elemen di Vue berdasarkan kondisi tertentu.

Apa Itu Conditional Rendering?

Conditional Rendering artinya kita bisa mengatur apakah suatu elemen tampil atau tidak berdasarkan nilai kondisi (boolean expression).

Di Vue, ada dua cara utama:

1. v-if, v-else-if, v-else
2. v-show

Menggunakan v-if

Directive v-if digunakan untuk menampilkan elemen hanya jika kondisi bernilai true.

<script setup>
import { ref } from "vue"

const isLogin = ref(false)
</script>

<template>
  <div>
    <p v-if="isLogin">Selamat datang kembali!</p>
    <p v-else>Silakan login terlebih dahulu.</p>
  </div>
</template>

Jika isLogin bernilai true, pesan "Selamat datang kembali!" akan muncul. Jika false, maka yang tampil adalah "Silakan login terlebih dahulu."

v-else-if dan v-else

Kita bisa menambahkan kondisi lebih dari satu.

<script setup>
import { ref } from "vue"

const score = ref(75)
</script>

<template>
  <div>
    <p v-if="score >= 90">Nilai A</p>
    <p v-else-if="score >= 75">Nilai B</p>
    <p v-else-if="score >= 60">Nilai C</p>
    <p v-else>Nilai D</p>
  </div>
</template>

Vue akan mengecek kondisi secara berurutan, dan hanya satu yang akan ditampilkan.

Menggunakan v-show

Directive v-show juga bisa menyembunyikan atau menampilkan elemen, tetapi caranya berbeda.

<script setup>
import { ref } from "vue"

const isVisible = ref(true)
</script>

<template>
  <div>
    <p v-show="isVisible">Teks ini bisa disembunyikan dengan v-show</p>
    <button @click="isVisible = !isVisible">Toggle</button>
  </div>
</template>

Perbedaan:

• v-if → elemen benar-benar dihapus atau ditambahkan dari DOM.
• v-show → elemen tetap ada di DOM, tapi hanya dikontrol dengan CSS (display: none).

Perbedaan v-if vs v-show

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Conditional Rendering di Vue, menggunakan v-if, v-else-if, v-else, serta v-show. Kita juga memahami perbedaan keduanya dan kapan lebih baik digunakan.

Di artikel berikutnya, kita akan membahas tentang List Rendering, yaitu bagaimana menampilkan daftar data dengan v-for dan menggunakan key.

Terima kasih