Tutorial VueJs - Mengubah Class CSS Secara Dinamis

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.

Tinggalkan komentar