Рэактыўнасць аб'екта з 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;
}

Прымяніце аб'ект з класамі да якого-небудзь тэга з тэкстам.

Зрабіце кнопку, націсканне на якую будзе паказваць элемент.

Зрабіце кнопку, націсканне на якую будзе хаваць элемент.

Зрабіце кнопку, націсканне на якую будзе пераключаць элемент (паказваць, калі схаваны; хаваць, калі паказаны).