CSS კლასები data-ს მეშვეობით Vue-ში

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 კლასები.