Vue에서 CSS 클래스 객체

CSS 클래스는 객체에 저장될 수도 있습니다. 이때 클래스 이름은 객체의 키가 되고, 객체의 요소는 논리값이 됩니다. 값이 true이면, 클래스가 요소에 추가되고, false이면 추가되지 않습니다.

실제로 시도해 봅시다. 다음과 같은 클래스 객체가 있다고 가정합니다:

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

이 객체를 태그에 바인딩합시다:

<template>
	<p :class="obj">text</p>
</template>

다음은 CSS 클래스 객체입니다:

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

이 클래스들을 어떤 태그에 적용해 보세요. 어떤 클래스가 적용되고, 어떤 클래스가 적용되지 않는지 확인하세요.