Vue에서 CSS 클래스를 가진 객체의 반응성

CSS 클래스를 가진 객체는 요소에 반응적으로 클래스를 지정하기 편리하도록 설계되었습니다. 어떻게 사용하는지 살펴보겠습니다. 다음과 같은 CSS 클래스 객체가 있다고 가정해 봅시다:

data() {
	return {
		styles: {
			done: false,
		},
	}
}

이 객체를 태그에 바인딩해 보겠습니다:

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

클래스 done의 존재 여부가 태그의 텍스트에 취소선을 긋도록 해보겠습니다:

p.done {
	text-decoration: line-through;
}

스타일 객체를 변경하여 클래스 done를 활성화하는 버튼을 만들어 보겠습니다:

<template>
	<button @click="setDone">hide</button>
</template>

해당 메서드를 작성해 보겠습니다:

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

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

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

이 클래스가 존재하면 요소를 숨기도록 해보겠습니다:

p.hidden {
	display: none;
}

CSS 클래스 객체를 텍스트가 있는 어떤 태그에 적용해 보세요.

요소를 표시하는 버튼을 만들어 보세요.

요소를 숨기는 버튼을 만들어 보세요.

요소를 토글(숨겨져 있으면 표시, 표시되어 있으면 숨김)하는 버튼을 만들어 보세요.