Обект с 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,
		},
	}
}

Приложете тези класове към някакъв таг. Проверете кои класове са приложени, а кои не са.