CSS lớp thông qua data trong Vue
Có thể thêm CSS lớp vào phần tử
tùy thuộc vào giá trị của các thuộc tính
trong đối tượng data. Hãy xem
ví dụ. Giả sử chúng ta có các
thuộc tính sau:
data() {
return {
isActive: true,
hasError: true,
}
}
Hãy thêm các CSS lớp vào phần tử tùy thuộc vào giá trị của các thuộc tính của chúng ta:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
Cho các thuộc tính sau:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Hãy thực hiện để tùy thuộc vào giá trị của các thuộc tính này, các CSS lớp tương ứng được thêm vào thẻ.
