Objektin reaktiivisuus CSS-luokkien kanssa Vue:ssa

Objektin CSS-luokkien tarkoituksena on tehdä luokkien reaktiivisesta määrittämisestä elementeille kätevää. Katsotaan kuinka se tehdään. Oletetaan, että meillä on seuraava objekti luokilla:

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

Liitetään tämä objekti tagiin:

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

Oletetaan, että luokan done presenssi yliviivaa tagin tekstin:

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

Tehdään painike, jonka napsautus muuttaa tyylien objektia, sisältäen luokan done:

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

Kirjoitetaan vastaava metodi:

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

Annettu on seuraava objekti CSS-luokilla:

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

Oletetaan, että tämän luokan presenssi piilottaa elementin:

p.hidden {
	display: none;
}

Käytä objektia luokilla johonkin tagiin tekstillä.

Tee painike, jonka napsautus näyttää elementin.

Tee painike, jonka napsautus piilottaa elementin.

Tee painike, jonka napsautus togglaa elementin (näyttää, jos piilotettu; piilottaa, jos näkyvissä).