Реактивность объекта с 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;
}
Примените объект с классами к какому-нибудь тегу с текстом.
Сделайте кнопку, нажатие на которую будет показывать элемент.
Сделайте кнопку, нажатие на которую будет прятать элемент.
Сделайте кнопку, нажатие на которую будет тогглить элемент (показывать, если скрыт; скрывать, если показан).