Reactiviteit van object met CSS klassen in Vue

Een object met CSS klassen is bedoeld om op een handige manier reactief klassen aan elementen toe te wijzen. Laten we eens kijken hoe dat wordt gedaan. Stel we hebben het volgende object met klassen:

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

Laten we dit object binden aan een tag:

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

Stel dat de aanwezigheid van de klasse done de tekst van de tag doorstreept:

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

Laten we een knop maken waarop klikken het object met stijlen zal wijzigen, en de klasse done inschakelt:

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

Laten we de bijbehorende methode schrijven:

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

Het volgende object met CSS klassen is gegeven:

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

Stel dat de aanwezigheid van deze klasse het element verbergt:

p.hidden {
	display: none;
}

Pas het object met klassen toe op een willekeurige tag met tekst.

Maak een knop waarop klikken het element zal tonen.

Maak een knop waarop klikken het element zal verbergen.

Maak een knop waarop klikken het element zal toggleën (tonen, als het verborgen is; verbergen, als het getoond is).