Реактивность CSS в Vue

Объект с CSS классами предназначен для того, чтобы удобно было реактивно назначать классы элементам. Давайте посмотрим, как это делается. Пусть у нас есть следующий объект с классами:

App.vuedata()
{
    return {
        styles: {
            done: false,
        },
    }
}

Привяжем этот объект к тегу:

App.vue<template>
    <p :class="styles">text</p>
</template>

Пусть наличие класса done перечеркивает текст тега:

App.vue<style>
    p.done {
        text-decoration: line-through;
    }
</style>

Сделаем кнопку, нажатие на которую будет изменять объект со стилями, включая класс done:

App.vue<template>
    <button @click="setDone">hide</button>
</template>

Напишем соответствующий метод:

App.vuemethods: {
    setDone: function () {
        this.styles.done = true;
    }
}