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

これらのクラスを任意のタグに適用してください。どのクラスが適用され、どのクラスが適用されなかったかを確認してください。