Vue 8: Class & Style Bindings
easy⏱ 5 mincoursevue
Object syntax for :class
:class="{ active: isActive }" applies the active class only while isActive is truthy. You can combine multiple flags in the same object, and even mix in an array with static classes: :class="[baseClass, { active: isActive }]".
<!-- 'active' is applied only while isActive is true -->
<div :class="{ active: isActive, urgent: isUrgent }">...</div>
<!-- Array syntax combines multiple sources -->
<div :class="[baseClass, { active: isActive }]">...</div>
Object syntax for :style
:style takes an object of camelCase CSS properties (fontSize, not font-size) mapped to values. Because it's just JS, you can compute any property — color, size, position — from your reactive state.
<div :style="{ color: textColor, fontSize: size + 'px' }">...</div>
Build the status badge
Create a reactive state with active and urgent booleans. Bind a badge's :class to both flags, and its :style to a background/color that depends on them.