Reaktywność obiektu z klasami CSS w Vue

Obiekt z klasami CSS jest przeznaczony do tego, aby wygodnie reaktywnie przypisywać klasy elementom. Spójrzmy, jak to się robi. Załóżmy, że mamy następujący obiekt z klasami:

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

Powiążmy ten obiekt z tagiem:

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

Załóżmy, że obecność klasy done przekreśla tekst tagu:

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

Zróbmy przycisk, którego naciśnięcie będzie zmieniać obiekt ze stylami, włączając klasę done:

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

Napiszmy odpowiednią metodę:

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

Dany jest następujący obiekt z klasami CSS:

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

Załóżmy, że obecność tej klasy ukrywa element:

p.hidden {
	display: none;
}

Zastosuj obiekt z klasami do jakiegoś tagu z tekstem.

Zrób przycisk, którego naciśnięcie będzie pokazywać element.

Zrób przycisk, którego naciśnięcie będzie ukrywać element.

Zrób przycisk, którego naciśnięcie będzie przełączać element (pokazywać, jeśli ukryty; ukrywać, jeśli pokazany).