CSS классы через data в Vue

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

App.vuedata()
{
    return {
        isActive: true,
        hasError: true,
    }
}

Добавим элементу CSS классы в зависимости от значения наших свойств:

App.vue<template>
    <p :class="{active: isActive, error: hasError}">
        text
    </p>
</template>