Reaktivität von Objekten mit CSS-Klassen in Vue

Ein Objekt mit CSS-Klassen ist dazu gedacht, Klassen bequem reaktiv Elementen zuzuweisen. Lassen Sie uns sehen, wie das gemacht wird. Nehmen wir an, wir haben das folgende Objekt mit Klassen:

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

Binden wir dieses Objekt an ein Tag:

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

Nehmen wir an, das Vorhandensein der Klasse done durchstreicht den Text des Tags:

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

Erstellen wir einen Button, dessen Klick das Objekt mit den Stilen ändert, indem es die Klasse done aktiviert:

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

Schreiben wir die entsprechende Methode:

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

Gegeben ist das folgende Objekt mit CSS-Klassen:

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

Nehmen wir an, das Vorhandensein dieser Klasse versteckt das Element:

p.hidden {
	display: none;
}

Wenden Sie das Objekt mit Klassen auf ein beliebiges Tag mit Text an.

Erstellen Sie einen Button, dessen Klick das Element anzeigt.

Erstellen Sie einen Button, dessen Klick das Element verbirgt.

Erstellen Sie einen Button, dessen Klick das Element toggelt (anzeigt, falls versteckt; versteckt, falls angezeigt).