Reaktivnost objekta sa CSS klasama u Vue

Objekat sa CSS klasama je namenjen da se na pogodan način reaktivno dodeljuju klase elementima. Pogledajmo kako se to radi. Neka imamo sledeći objekat sa klasama:

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

Povežimo ovaj objekat sa tagom:

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

Neka prisustvo klase done precrtava tekst taga:

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

Napravimo dugme, čiji će klik promeniti objekat sa stilovima, uključujući klasu done:

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

Napišimo odgovarajuću metodu:

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

Dat je sledeći objekat sa CSS klasama:

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

Neka prisustvo ove klase sakriva element:

p.hidden {
	display: none;
}

Primenite objekat sa klasama na nekom tagu sa tekstom.

Napravite dugme, čiji će klik prikazati element.

Napravite dugme, čiji će klik sakriti element.

Napravite dugme, čiji će klik toglovati element (prikazati, ako je sakriven; sakriti, ako je prikazan).