В Vue.js вы можете использовать условие и статичный класс в атрибуте класса :class с помощью объекта JavaScript. Для этого можно использовать выражение с использованием тернарного оператора. Вот как это работает:
<div :class="{ 'static-class': true, 'conditional-class': isConditionTrue }">
Some Content
</div>
В этом примере класс static-class будет применен всегда, независимо от условия. Класс conditional-class будет применен, только если значение переменной isConditionTrue будет истинным.
Вы также можете добавить несколько условных классов, если нужно:
<div :class="{ 'static-class': true, 'conditional-class': isConditionTrue, 'another-conditional-class': anotherCondition }">
Some Content
</div>
Здесь, класс another-conditional-class будет применен только тогда, когда и условие isConditionTrue и условие anotherCondition будут истинными.
Вы также можете комбинировать условные классы с динамическими значениями, используя объекты внутри объекта :class. Например:
<div :class="{
'static-class': true,
'conditional-class': isConditionTrue,
'dynamic-class': dynamicValue === 'foo',
'another-dynamic-class': dynamicValue === 'bar'
}">
Some Content
</div>
В этом примере класс dynamic-class будет применен только тогда, когда значение переменной dynamicValue равно 'foo'. Класс another-dynamic-class будет применен только, когда значение переменной dynamicValue равно 'bar'.
Таким образом, вы можете использовать условия и статичные классы в атрибуте класса :class в Vue.js, чтобы управлять отображением классов на основе различных условий и состояний в вашем приложении.