Réactivité d'un objet avec des classes CSS dans Vue

Un objet avec des classes CSS est destiné à faciliter l'attribution réactive de classes aux éléments. Voyons comment cela se fait. Supposons que nous ayons l'objet suivant avec des classes :

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

Lions cet objet à une balise :

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

Supposons que la présence de la classe done barré le texte de la balise :

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

Créons un bouton sur lequel un clic modifiera l'objet avec les styles, en activant la classe done :

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

Écrivons la méthode correspondante :

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

L'objet suivant avec des classes CSS est donné :

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

Supposons que la présence de cette classe cache l'élément :

p.hidden {
	display: none;
}

Appliquez l'objet avec les classes à une balise quelconque avec du texte.

Créez un bouton dont le clic affichera l'élément.

Créez un bouton dont le clic cachera l'élément.

Créez un bouton dont le clic alternera l'état de l'élément (afficher, s'il est caché ; cacher, s'il est affiché).