Reaktiviteit van objek met CSS-klasse in Vue

'n Objek met CSS-klasse is bedoel om maklik klasse reaktief aan elemente toe te ken. Kom ons kyk hoe dit gedoen word. Gestel ons het die volgende objek met klasse:

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

Laat ons hierdie objek aan 'n etiket bind:

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

Gestel die teenwoordigheid van die klas done streep die teks van die etiket deur:

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

Laat ons 'n knoppie maak wat, wanneer dit gedruk word, die objek met style sal verander, en die klas done sal aktiveer:

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

Laat ons die ooreenstemmende metode skryf:

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

Die volgende objek met CSS-klasse word gegee:

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

Gestel die teenwoordigheid van hierdie klas verberg die element:

p.hidden {
	display: none;
}

Pas die objek met klasse toe op enige etiket met teks.

Maak 'n knoppie wat, wanneer dit gedruk word, die element sal wys.

Maak 'n knoppie wat, wanneer dit gedruk word, die element sal verberg.

Maak 'n knoppie wat, wanneer dit gedruk word, die element sal wissel (wys, indien versteek; verberg, indien gewys).