Reaktivnost objekta s CSS razredi v Vue

Objekt s CSS razredi je namenjen temu, da priročno reaktivno dodeljujemo razrede elementom. Poglejmo, kako se to naredi. Recimo, da imamo naslednji objekt z razredi:

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

Povežimo ta objekt z oznako:

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

Naj prisotnost razreda done prečrta besedilo oznake:

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

Naredimo gumb, katerega klik bo spremenil objekt s slogi, vključno z razredom done:

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

Napišimo ustrezen postopek:

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

Podan je naslednji objekt s CSS razredi:

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

Naj prisotnost tega razreda skrije element:

p.hidden {
	display: none;
}

Uporabite objekt z razredi na kateri koli oznaki z besedilom.

Naredite gumb, katerega klik bo pokazal element.

Naredite gumb, katerega klik bo skril element.

Naredite gumb, katerega klik bo preklopil element (pokazal, če je skrit; skril, če je prikazan).