Reactividad de objetos con clases CSS en Vue

Un objeto con clases CSS está destinado a asignar convenientemente clases a los elementos de forma reactiva. Veamos cómo se hace esto. Supongamos que tenemos el siguiente objeto con clases:

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

Vinculemos este objeto a una etiqueta:

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

Supongamos que la presencia de la clase done tacha el texto de la etiqueta:

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

Hagamos un botón, cuyo clic cambiará el objeto con estilos, activando la clase done:

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

Escribamos el método correspondiente:

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

Se da el siguiente objeto con clases CSS:

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

Supongamos que la presencia de esta clase oculta el elemento:

p.hidden {
	display: none;
}

Aplique el objeto con clases a alguna etiqueta con texto.

Haga un botón, cuyo clic mostrará el elemento.

Haga un botón, cuyo clic ocultará el elemento.

Haga un botón, cuyo clic alternará el elemento (mostrar, si está oculto; ocultar, si está visible).