Reaktivita objektu s CSS třídami ve Vue

Objekt s CSS třídami je určen k tomu, aby bylo pohodlně reaktivně přiřazovat třídy prvkům. Podívejme se, jak se to dělá. Předpokládejme, že máme následující objekt s třídami:

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

Přivažme tento objekt k tagu:

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

Předpokládejme, že přítomnost třídy done přeškrtne text tagu:

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

Vytvořme tlačítko, jehož kliknutí změní objekt se styly, zapne třídu done:

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

Napišme odpovídající metodu:

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

Je dán následující objekt s CSS třídami:

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

Předpokládejme, že přítomnost této třídy skryje prvek:

p.hidden {
	display: none;
}

Aplikujte objekt s třídami na nějaký tag s textem.

Vytvořte tlačítko, jehož kliknutí prvek zobrazí.

Vytvořte tlačítko, jehož kliknutí prvek skryje.

Vytvořte tlačítko, jehož kliknutí prvek přepne (zobrazí, pokud je skrytý; skryje, pokud je zobrazený).