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

Примените объект с классами к какому-нибудь тегу с текстом.

Сделайте кнопку, нажатие на которую будет показывать элемент.

Сделайте кнопку, нажатие на которую будет прятать элемент.

Сделайте кнопку, нажатие на которую будет тогглить элемент (показывать, если скрыт; скрывать, если показан).

←→
↑