Vue Academy · Lesson

Attribute and Class Bindings

Bind attributes, classes, and styles dynamically.

Binding Classes and Styles

A common need is changing an element class or style based on state.

Vue special-cases :class and :style so you can pass objects and arrays, not just strings.

Pass an object to :class. Keys are class names; truthy values include them.

<div :class="{ active: isActive, disabled: isDisabled }">
  Status box
</div>

<!-- if isActive is true, the "active"
     class is applied -->