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;
}

クラスを持つオブジェクトを、何らかのテキストを含むタグに適用してください。

要素を表示するボタンを作成してください。

要素を非表示にするボタンを作成してください。

要素をトグルするボタンを作成してください（非表示の場合は表示、表示の場合は非表示）。