Đối tượng với các lớp CSS trong Vue
Các lớp CSS cũng có thể được lưu trữ trong
các đối tượng. Trong đó, tên các lớp sẽ là
khóa của đối tượng, và các phần tử của
đối tượng sẽ là các giá trị logic.
Nếu giá trị là true,
thì lớp sẽ được thêm vào phần tử,
còn nếu là false, thì sẽ không.
Hãy thử thực hành. Giả sử chúng ta có đối tượng sau với các lớp:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Hãy liên kết đối tượng này với một thẻ:
<template>
<p :class="obj">text</p>
</template>
Cho đối tượng sau với các lớp CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Áp dụng các lớp này cho một thẻ bất kỳ. Kiểm tra xem lớp nào được áp dụng, và lớp nào thì không.
