Reactivitatea obiectului cu clase CSS în Vue

Obiectul cu clase CSS este destinat pentru a fi utilizat în mod convenabil pentru atribuirea reactivă a claselor elementelor. Să vedem cum se face acest lucru. Să presupunem că avem următorul obiect cu clase:

data() {
	return {
		styles: {
			done: false,
		},
	}
}

Să legăm acest obiect de o etichetă:

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

Să presupunem că prezența clasei done tăie textul etichetei:

p.done {
	text-decoration: line-through;
}

Să creem un buton, a cărui apăsare va modifica obiectul cu stiluri, activând clasa done:

<template>
	<button @click="setDone">hide</button>
</template>

Să scriem metoda corespunzătoare:

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

Este dat următorul obiect cu clase CSS:

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

Să presupunem că prezența acestei clase ascunde elementul:

p.hidden {
	display: none;
}

Aplicați obiectul cu clase unei etichete cu text.

Realizați un buton, a cărui apăsare va afișa elementul.

Realizați un buton, a cărui apăsare va ascunde elementul.

Realizați un buton, a cărui apăsare va comuta elementul (afișează, dacă este ascuns; ascunde, dacă este afișat).