Вопрос проверяет умение управлять внешним видом компонентов в зависимости от состояния данных.
Во Vue условная стилизация реализуется через :class и :style. Они позволяют добавлять или убирать классы и стили в зависимости от условий. Логика остаётся в данных или computed-свойствах. Это делает шаблон декларативным и читаемым. Такой подход используется повсеместно.
Vue предоставляет несколько декларативных способов условного применения стилей.
На практике используются:
условные CSS-классы
условные inline-стили
computed-свойства для подготовки данных
Самый распространённый вариант:
<div :class="{ active: isActive, disabled: isDisabled }"></div>
Класс добавляется только если условие истинно.
Inline-стили используются реже:
<div :style="{ color: isError ? 'red' : 'black' }"></div>
Рекомендуется:
выносить сложные условия в computed
избегать громоздких выражений в шаблоне
использовать CSS для визуальных правил
Условная стилизация во Vue строится вокруг :class и :style и должна оставаться простой и декларативной.