Binding html Classes in Vue

Binding and manipulating class and style attributes of an element is a common need, so Vue provides enhancements to using v-bind with those attributes to avoid having to generate them with string concatenations.

see also Binding Inline Styles in Vue

Binding the class Attribute

Binding to Objects

Passing an object to :class (v-bind:class) can be used to dynamically change classes based on boolean values

<div :class="{ active: isActive }"></div>

Multiple classes can be toggled together in this way by having more fields in the object.

const isActive = ref(true)
const hasError = ref(false)

<div
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

The :class directive can also coexist with standard class attribute:

<div
  class="static"
  :class="{ active: isActive }"
></div>

Computed Property Binding

Class can be bound to a computed property that returns an object

const isActive = ref(true)
const error = ref(null)
 
const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

<div :class="classObject"></div>

Binding to Arrays

Binding :class to an array to apply multiple classes at the same time

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

It can also be chained with Ternary Operator

<div :class="[isActive ? activeClass : '', errorClass]"></div>

where errorClass will be always applied, while activeClass will be only applied when isActive is truthy

To shorten the code the object syntax is also usable inside the array syntax:

<div :class="[{ activeClass: isActive }, errorClass]"></div>

Binding with Components

When class attribute is used on a component with only one root element in the template, the classes will be automatically added to the component’s root element, and the same is true for class bindings.

When the component has multiple root elements, we need to define the element receiving the class with $attrs component property

<!-- MyComponent template using $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

which will render

<p class="baz">Hi!</p>
<span>This is a child component</span>