Reaktivitet av objekt med CSS-klasser i Vue

Et objekt med CSS-klasser er beregnet for å kunne tildele klasser til elementer på en reaktiv og praktisk måte. La oss se hvordan dette gjøres. La oss si at vi har følgende objekt med klasser:

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

La oss binde dette objektet til en tag:

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

La tilstedeværelsen av klassen done gjennomstreke teksten i taggen:

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

La oss lage en knapp som, når den trykkes på, vil endre objektet med stiler, og aktivere klassen done:

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

La oss skrive den tilsvarende metoden:

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

Følgende objekt med CSS-klasser er gitt:

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

La tilstedeværelsen av denne klassen skjule elementet:

p.hidden {
	display: none;
}

Bruk objektet med klasser på en tag med tekst.

Lag en knapp som, når den trykkes på, viser elementet.

Lag en knapp som, når den trykkes på, skjuler elementet.

Lag en knapp som, når den trykkes på, toggler elementet (viser det, hvis skjult; skjuler det, hvis vist).