CSS კლასების ობიექტი Vue-ში

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

გამოიყენეთ ეს კლასები რომელიმე ტეგზე. შეამოწმეთ, რომელი კლასები გამოიყენეს, და რომელი არა.