Реактивност на објект со CSS класи во Vue

Објектот со CSS класи е наменет за удобно реактивно доделување на класи на елементи. Ајде да погледнеме како се прави ова. Да претпоставиме дека го имаме следниот објект со класи:

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

Да го поврземе овој објект со таг:

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

Нека присуството на класата done го прецрта текстот во тагот:

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

Да направиме копче, притискање на кое ќе го менува објектот со стилови, вклучувајќи ја класата done:

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

Да го напишеме соодветниот метод:

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

Даден е следниов објект со CSS класи:

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

Нека присуството на оваа класа го скрие елементот:

p.hidden {
	display: none;
}

Применете го објектот со класи на некој таг со текст.

Направете копче, притискање на кое ќе го прикажува елементот.

Направете копче, притискање на кое ќе го крие елементот.

Направете копче, притискање на кое ќе го вклучува/исклучува елементот (прикажува, ако е скриен; крие, ако е прикажан).