Как использовать :style для условной стилизации?

Директива :style используется, когда внешний вид элемента напрямую зависит от данных.

Определение

:style — это механизм Vue для динамического задания inline-стилей через JavaScript-объект или массив объектов.

Базовый синтаксис

Простейший пример:

<div :style="{ color: isError ? 'red' : 'black' }"></div>

Vue применит соответствующее значение в зависимости от состояния данных.

Объектная форма

Наиболее распространённый вариант:

<div :style="{ width: size + 'px', opacity: isVisible ? 1 : 0.5 }"></div>

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

Для более сложной логики рекомендуется:

computed: {
  styles() {
    return {
      backgroundColor: this.isActive ? 'green' : 'gray'
    }
  }
}

<div :style="styles"></div>

Когда использовать, а когда нет

:style уместен, если:

• значение вычисляется динамически

• стиль зависит от данных

• невозможно выразить через классы

Для сложных визуальных состояний лучше использовать CSS-классы.

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

:style подходит для точечной динамической стилизации, но не заменяет полноценную работу с CSS.