Реактивност на обект с 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;
}

Приложете обекта с класове към някакъв таг с текст.

Направете бутон, натискането на който ще показва елемента.

Направете бутон, натискането на който ще скрива елемента.

Направете бутон, натискането на който ще превключва елемента (показва, ако е скрит; скрива, ако е показан).