Objek dengan Kelas CSS di Vue
Kelas CSS juga dapat disimpan dalam
objek. Dalam hal ini, nama kelas
akan menjadi kunci objek, dan elemen
objek akan berupa nilai boolean.
Jika nilainya true,
maka kelas akan ditambahkan ke elemen,
dan jika false, maka tidak akan.
Mari kita coba dalam praktik. Misalkan kita memiliki objek berikut dengan kelas:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Ikat objek ini ke tag:
<template>
<p :class="obj">text</p>
</template>
Diberikan objek berikut dengan kelas CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Terapkan kelas-kelas ini ke suatu tag. Periksa kelas mana yang diterapkan, dan mana yang tidak.
