Vue에서 data를 통한 CSS 클래스
CSS 클래스는 data 객체의 속성값에 따라
요소에 추가할 수 있습니다.
예제를 통해 살펴보겠습니다.
다음과 같은 속성이 있다고 가정합니다:
data() {
return {
isActive: true,
hasError: true,
}
}
우리 속성들의 값에 따라 요소에 CSS 클래스를 추가해 보겠습니다:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
다음 속성들이 주어졌습니다:
data() {
return {
isValid: true,
isDisabled: true,
}
}
이 속성들의 값에 따라 해당 태그에 적절한 CSS 클래스가 추가되도록 만드세요.
