Ketika kita memberikan sebuah warna pada bootstrap cara yang simple adalah kita hanya memberikan sebuah class warna yang sudah di sedikan bootstrap ke sebuah elemen html sesuai yang kita ingin berikan efectnya, misal tag p kita berikan class text-primary seperti itu, lalu bagaimana jika kita ingin memberikan class itu tetapi melalui event dimana kita sedang menggunakan framework vuejs, sesaat lagi kita akan bahas cara memberikan efek warna bootstrap dengan VueJS, simak terus ya teman-teman.

Untuk kasus cara memberikan efek warna bootstrap dengan VueJS, kita akan menyediakan sebuah button dimana button itu mempunyai efect warna yang berbeda-beda misal setiap kita menekan button ini akan mendapatkan hasil yang berbeda, dan target kita untuk kali ini adalah sebuah judulnya ya, jadi judul itu akan kita rubah warna nya.

dan cara memberikan efek warna bootstrap dengan VueJS yang kita butuhkan adalah karena kita menggunkan event yang cocok adalah kita menggunakan bantuan methods oke langsung saja ya kita lihat caranya seperti ini:

bisa dilihat kita menggunakan v-on:click=”warna()” jadi event itu akan menuju ke methods warna, dan didalam methods itu kita buat kondisi sesuai value button. dan hasil layoutnya seperti ini:

cara memberikan efek warna bootstrap dengan VueJS

jika teman-teman ingin melihat demo nya silahkan klik saja lihat disini.

dan saya rasa sudah cukup jelas ya, tentang cara memberikan efek warna bootstrap dengan VueJS, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

WhatsApp chat