Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Styling di Vue, bagaimana cara memberikan gaya pada komponen menggunakan inline style, class binding, scoped style, hingga global style.
Pada artikel kali ini, kita akan melanjutkan pembahasan tentang Dynamic Class & Style Binding, yaitu cara membuat tampilan menjadi lebih interaktif dengan mengikat data reaktif langsung ke class maupun style.
Apa Itu Dynamic Class & Style Binding?
Dengan dynamic binding, kita bisa mengubah class atau style sebuah elemen berdasarkan kondisi tertentu. Vue menyediakan dua atribut khusus untuk ini:
:class → mengikat nilai class secara dinamis.:style → mengikat inline style secara dinamis.
Binding Class dengan Data
<script setup>
import { ref } from "vue"
const isActive = ref(true)
</script>
<template>
<p :class="{ active: isActive }">
Teks ini akan hijau jika aktif
</p>
</template>
<style scoped>
.active {
color: green;
font-weight: bold;
}
</style>
Jika isActive = true, class active ditambahkan.
Multiple Class Binding
Kita bisa mengikat beberapa class sekaligus dengan array.
<script setup>
const classes = ["text-red", "bold"]
</script>
<template>
<p :class="classes">Teks ini merah dan tebal</p>
</template>
<style scoped>
.text-red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
Semua class dalam array akan diterapkan.
Conditional Class
Kita juga bisa menambahkan class berdasarkan kondisi.
<script setup>
import { ref } from "vue"
const isError = ref(false)
</script>
<template>
<p :class="[isError ? 'error' : 'success']">
{{ isError ? "Terjadi kesalahan" : "Berhasil!" }}
</p>
</template>
<style scoped>
.error {
color: red;
}
.success {
color: green;
}
</style>
Jika isError = true, maka class error digunakan, sebaliknya class success.
Dynamic Style Binding
Selain class, kita juga bisa mengikat style langsung dengan object JavaScript.
<script setup>
import { ref } from "vue"
const fontSize = ref(18)
</script>
<template>
<p :style="{ color: 'blue', fontSize: fontSize + 'px' }">
Teks dengan ukuran dinamis
</p>
<button @click="fontSize += 2">Perbesar</button>
</template>
Ukuran teks akan bertambah setiap kali tombol diklik.
Style Binding dengan Object/Array
Kita bisa memisahkan style dalam object agar lebih rapi.
<script setup>
import { ref } from "vue"
const styleObj = ref({
color: "purple",
backgroundColor: "lavender",
padding: "10px"
})
</script>
<template>
<div :style="styleObj">Box dengan style dari object</div>
</template>
Kita juga bisa menggunakan array style:
<template>
<div :style="[ { color: 'red' }, { fontSize: '20px' } ]">
Teks dengan style array
</div>
</template>
Kesimpulan
Dari pembahasan ini, kita belajar bahwa Vue memberikan cara yang sangat fleksibel untuk mengelola tampilan dengan dynamic class dan style binding.
Dengan memanfaatkan :class dan :style, kita bisa mengubah tampilan elemen berdasarkan data reaktif maupun kondisi tertentu.
Hal ini membuat UI menjadi lebih interaktif, mudah dikontrol, dan tetap terorganisir. Kita bisa menggunakannya untuk menampilkan status validasi, notifikasi error, perubahan ukuran teks, warna tema, dan banyak kebutuhan lainnya.
Dengan memahami materi-materi dasar ini, kita sudah memiliki pondasi yang kuat untuk membangun aplikasi menggunakan Vue.
Langkah berikutnya adalah memperdalam ke level yang lebih lanjut, seperti Vue Router untuk navigasi, Pinia untuk state management, serta integrasi dengan backend API agar aplikasi kita menjadi lebih nyata dan fungsional.
Semoga seri ini bisa menjadi pijakan awal yang bermanfaat bagi kita semua dalam menguasai Vue. Jangan berhenti di sini, teruslah bereksperimen, membaca dokumentasi, dan mencoba membangun proyek-proyek kecil agar pemahaman semakin matang.
Terima kasih.