Reaktiviteti i Objektit me Klasa CSS në Vue

Një objekt me klasa CSS është menduar për t'iu caktuar në mënyrë të përshtatshme reaktive klasat elementeve. Le të shohim se si bëhet kjo. Le të themi se kemi objektin e mëposhtëm me klasa:

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

Le ta lidhim këtë objekt me një tag:

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

Le të themi se prania e klasës done e kryqëzon tekstin e tag-ut:

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

Le të bëjmë një buton, klikimi i të cilit do të ndryshojë objektin me stilime, duke përfshirë klasën done:

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

Le të shkruajmë metodën përkatëse:

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

Është dhënë objekti i mëposhtëm me klasa CSS:

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

Le të themi se prania e kësaj klase e fsheh elementin:

p.hidden {
	display: none;
}

Aplikoni objektin me klasa në një tag me tekst.

Bëni një buton, klikimi i të cilit do ta shfaqë elementin.

Bëni një buton, klikimi i të cilit do ta fshehë elementin.

Bëni një buton, klikimi i të cilit do ta toggle-ojë elementin (ta shfaqë, nëse është i fshehur; ta fshehë, nëse është i shfaqur).