Reattività dell'oggetto con classi CSS in Vue

L'oggetto con classi CSS è progettato per assegnare in modo conveniente e reattivo le classi agli elementi. Diamo un'occhiata a come si fa. Supponiamo di avere il seguente oggetto con classi:

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

Associamo questo oggetto a un tag:

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

Supponiamo che la presenza della classe done barrì il testo del tag:

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

Creiamo un pulsante, il cui clic cambierà l'oggetto con gli stili, attivando la classe done:

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

Scriviamo il metodo corrispondente:

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

È dato il seguente oggetto con classi CSS:

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

Supponiamo che la presenza di questa classe nasconda l'elemento:

p.hidden {
	display: none;
}

Applica l'oggetto con le classi a un tag qualsiasi con del testo.

Crea un pulsante, il cui clic mostrerà l'elemento.

Crea un pulsante, il cui clic nasconderà l'elemento.

Crea un pulsante, il cui clic alternerà l'elemento (mostrare, se nascosto; nascondere, se mostrato).