Reatividade de Objeto com Classes CSS em Vue

Um objeto com classes CSS é destinado a facilitar a atribuição reativa de classes aos elementos. Vamos ver como isso é feito. Suponha que temos o seguinte objeto com classes:

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

Vamos vincular este objeto a uma tag:

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

Suponha que a presença da classe done risque o texto da tag:

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

Vamos criar um botão cujo clique alterará o objeto de estilos, ativando a classe done:

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

Vamos escrever o método correspondente:

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

É dado o seguinte objeto com classes CSS:

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

Suponha que a presença desta classe oculte o elemento:

p.hidden {
	display: none;
}

Aplique o objeto com classes a alguma tag com texto.

Crie um botão cujo clique mostrará o elemento.

Crie um botão cujo clique ocultará o elemento.

Crie um botão cujo clique alternará a visibilidade do elemento (mostrará, se estiver oculto; ocultará, se estiver visível).