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

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

Направите дугме, чији ће клик приказати елемент.

Направите дугме, чији ће клик сакрити елемент.

Направите дугме, чији ће клик преокренути стање елемента (приказати, ако је сакривен; сакрити, ако је приказан).