CSS osztályokkal rendelkező objektum reaktivitása Vue-ban

A CSS osztályokkal rendelkező objektum arra szolgál, hogy kényelmesen lehessen reaktívan osztályokat hozzárendelni az elemekhez. Nézzük meg, hogyan is történik ez. Tegyük fel, hogy a következő osztályobjektumunk van:

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

Kössük ezt az objektumot egy tag-hez:

<template>
	<p :class="styles">szöveg</p>
</template>

Tegyük fel, hogy a done osztály jelenléte áthúzza a tag szövegét:

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

Készítsünk egy gombot, amelyre kattintva megváltozik a stílusobjektum, beváltva a done osztályt:

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

Írjuk meg a megfelelő metódust:

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

A következő CSS osztályobjektum adott:

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

Tegyük fel, hogy ennek az osztálynak a jelenléte elrejti az elemet:

p.hidden {
	display: none;
}

Alkalmazza az osztályobjektumot valamilyen, szöveget tartalmazó tag-re.

Készítsen egy gombot, amelyre kattintva az elem megjelenik.

Készítsen egy gombot, amelyre kattintva az elem elrejtődik.

Készítsen egy gombot, amelyre kattintva az elem átkapcsol (megjelenik, ha rejtett; elrejtődik, ha látható).