Tutorial VueJS – Mengubah Class CSS Secara Dinamis

Dipublikasikan oleh El Cicko pada

tutorial vuejs mengubah class css secara dinamis

Tutorial VueJS yang akan saya bahas kali ini adalah tentang bagaimana cara untuk mengubah class CSS pada pada halaman HTML secara dinamis dengan menggunakan fitur class binding.

VueJS memilki fitur directive yang bernama v-bind. v-bind adalah sebuah directive mempunyai fungsi untuk menetapkan suatu atribut HTML agar nilainya dapat terupdate secara reactive atau real time.

Contohnya misalkan kita akan mengganti suatu warna latar belakang dari warna putih menjadi warna hitam dengan suatu kondisi tertentu. Pertama, kita memiliki dua buah class yang berbeda yaitu dark-theme dan light-theme lalu kita tinggal mengganti class tersebut sesuai dengan theme yang kita pilih.

Apakah v-bind hanya mendukung class CSS saja ? tentu tidak, banyak sekali fungsi yang dapat kita gunakan dengan hanya v-bind saja, intinya v-bind bertugas untuk menampilkan variable ke dalam halaman HTML.

Bagaimana Melakukannya di VueJS ?

Caranya sangat mudah, kita tinggal menggunakan fitur class binding dari VueJS seperti yang saya bahas di awal :

:class="[ isDark ? 'dark-theme' : 'light-theme' ]"

Lalu kita tinggal mengimplementasikannya di dalam component

Tutorial VueJs Mengubah Class CSS Secara Dinamis

Mudah kan? sekian dulu tutorial VueJS dari saya, silahkan dicoba.


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

0 Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *