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クラスがタグに追加されるようにしてください。