Reaktivitet för objekt med CSS-klasser i Vue

Ett objekt med CSS-klasser är avsett för att på ett bekvämt sätt reaktivt tilldela klasser till element. Låt oss se hur detta görs. Antag att vi har följande objekt med klasser:

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

Låt oss binda detta objekt till en tagg:

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

Låt närvaron av klassen done genomstryka texten i taggen:

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

Låt oss skapa en knapp, klick på vilken kommer att ändra objektet med stilar, och aktivera klassen done:

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

Låt oss skriva motsvarande metod:

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

Följande objekt med CSS-klasser är givet:

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

Låt närvaron av denna klass dölja elementet:

p.hidden {
	display: none;
}

Tillämpa objektet med klasser på någon tagg med text.

Skapa en knapp, klick på vilken kommer att visa elementet.

Skapa en knapp, klick på vilken kommer att dölja elementet.

Skapa en knapp, klick på vilken kommer att växla elementet (visa, om det är dolt; dölja, om det visas).