Obiect cu clase CSS în Vue

Clasele CSS pot fi de asemenea stocate în obiecte. În acest caz, numele claselor vor fi cheile obiectului, iar elementele obiectului vor fi valori logice. Dacă valoarea este true, atunci clasa va fi adăugată elementului, iar dacă este false, atunci nu va fi.

Să încercăm în practică. Să presupunem că avem următorul obiect cu clase:

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

Să legăm acest obiect de etichetă:

<template>
	<p :class="obj">text</p>
</template>

Este dat următorul obiect cu clase CSS:

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

Aplicați aceste clase unei etichete. Verificați care clase s-au aplicat, și care nu.