Reaktivita objektu s CSS triedami vo Vue

Objekt s CSS triedami je určený na to, aby bolo pohodlne reaktyvne priraďovať triedy elementom. Pozrime sa, ako sa to robí. Majme nasledujúci objekt s triedami:

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

Previažme tento objekt k tagu:

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

Nech prítomnosť triedy done preškrtáva text tagu:

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

Urobme tlačidlo, kliknutie na ktoré zmení objekt so štýlmi, zapínajúc triedu done:

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

Napíšme zodpovedajúcu metódu:

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

Daný je nasledujúci objekt s CSS triedami:

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

Nech prítomnosť tejto triedy skryje element:

p.hidden {
	display: none;
}

Aplikujte objekt s triedami na nejaký tag s textom.

Urobte tlačidlo, kliknutie na ktoré zobrazí element.

Urobte tlačidlo, kliknutie na ktoré skryje element.

Urobte tlačidlo, kliknutie na ktoré bude prepínať element (zobraziť, ak je skrytý; skryť, ak je zobrazený).