Reaktivitet af objekt med CSS-klasser i Vue

Et objekt med CSS-klasser er designet til at gøre det bekvemt reaktivt at tildele klasser til elementer. Lad os se, hvordan det gøres. Lad os sige, at vi har følgende objekt med klasser:

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

Lad os binde dette objekt til en tag:

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

Lad tilstedeværelsen af klassen done gennemstrege tag'ens tekst:

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

Lav en knap, hvor et klik på den vil ændre objektet med stilarter, hvilket aktiverer klassen done:

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

Lad os skrive den tilsvarende metode:

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

Følgende objekt med CSS-klasser er givet:

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

Lad tilstedeværelsen af denne klasse skjule elementet:

p.hidden {
	display: none;
}

Anvend objektet med klasser på en eller anden tag med tekst.

Lav en knap, hvor et klik på den vil vise elementet.

Lav en knap, hvor et klik på den vil skjule elementet.

Lav en knap, hvor et klik på den vil toggle elementet (vise, hvis skjult; skjule, hvis vist).