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

Question

Объектная нотация :class позволяет связывать имена классов с условиями. Класс добавляется, если соответствующее выражение истинно. Это делает шаблон наглядным и легко расширяемым. Такой подход предпочтительнее сложных тернарных выражений. Он широко используется в реальных проектах.

YeaHub · Accepted Answer

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

Как это работаетVue:берёт ключи объекта как имена классовпроверяет значениядобавляет только те классы, где значение trueИспользование с computedДля сложных условий:computed: { classes() { return { active: this.isActive, disabled: this.isDisabled } } }

Преимущества подходаОбъектная нотация:улучшает читаемостьлегко масштабируетсяупрощает поддержкуКраткий вывод:class с объектной нотацией — стандартный и рекомендуемый способ управления CSS-классами во Vue.