Как использовать :class с объектной нотацией?

Объектная нотация :class — самый читаемый и безопасный способ условной стилизации.

Синтаксис

Базовый пример выглядит так:

<div :class="{ active: isActive, error: hasError }"></div>

Как это работает

Vue:

• берёт ключи объекта как имена классов

• проверяет значения

• добавляет только те классы, где значение true

Использование с computed

Для сложных условий:

computed: {
  classes() {
    return {
      active: this.isActive,
      disabled: this.isDisabled
    }
  }
}

<div :class="classes"></div>

Преимущества подхода

Объектная нотация:

• улучшает читаемость

• легко масштабируется

• упрощает поддержку

Краткий вывод

:class с объектной нотацией — стандартный и рекомендуемый способ управления CSS-классами во Vue.