Vue.js Class and Style Binding

Class and style binding lets data control how an element looks. A button turns red after an error, a menu item gains a highlight when selected, and a progress bar grows as a download advances. Vue connects the data to the class and style attributes so the appearance updates the moment the data changes. No manual editing of the page is needed.

Think of a traffic light. The light does not decide its own color. A controller sends a signal, and the correct lamp glows. Your data is the controller, and the class or style is the lamp.

Bind a Class with an Object

Write :class with an object. Each key is a class name, and each value is a true or false condition. Vue adds the class when the value is true and removes it when the value is false.

<div id="app">
  <p :class="{ active: isActive, error: hasError }">Status message</p>
  <button @click="isActive = !isActive">Toggle active</button>
</div>

<script>
  Vue.createApp({
    data() {
      return { isActive: true, hasError: false };
    }
  }).mount("#app");
</script>

The paragraph starts with the class active. Each click on the button adds or removes that class.

Diagram: Object Syntax

:class="{ active: isActive, error: hasError }"

isActive = true,  hasError = false
   --> class="active"

isActive = true,  hasError = true
   --> class="active error"

Keep Static Classes Alongside Dynamic Ones

A normal class attribute and a :class binding work on the same element. Vue merges both lists.

<p class="message" :class="{ error: hasError }">Saved</p>

The element always carries message and receives error only when hasError is true.

Bind a Class with an Array

An array applies every class it lists. Items inside the array can hold conditions through the ternary operator.

<p :class="[baseClass, isBig ? 'big' : 'small']">Hello</p>

data() {
  return { baseClass: "card", isBig: true };
}

The result is class="card big". A change of isBig to false produces class="card small".

Move Class Logic into a Computed Property

Long objects clutter a template. A computed property keeps the template short and the logic readable.

computed: {
  buttonClasses() {
    return {
      primary: this.type === "primary",
      disabled: this.loading,
      large: this.size === "large"
    };
  }
}

<button :class="buttonClasses">Send</button>

Bind Inline Styles

The :style binding takes an object of CSS properties. Use camelCase names such as fontSize, or quote the normal names such as 'font-size'.

<div :style="{ color: textColor, fontSize: size + 'px' }">Resize me</div>

data() {
  return { textColor: "darkgreen", size: 20 };
}

Diagram: Style Binding

data: textColor = "darkgreen", size = 20
         |
         v
<div style="color: darkgreen; font-size: 20px">

Build a Progress Bar

Dynamic widths suit inline styles, because the value changes continuously and a fixed class cannot describe it.

<div class="track">
  <div class="fill" :style="{ width: percent + '%' }"></div>
</div>
<button @click="percent += 10">Add 10%</button>

Diagram: Growing Bar

percent = 30   -->  [###-------]
percent = 60   -->  [######----]
percent = 100  -->  [##########]

Choose Between Class and Style

• Use classes for states with names, such as active, disabled, or highlighted. Your stylesheet keeps the design in one place.
• Use inline styles for values calculated at run time, such as a width percentage or a color picked by the user.
• Avoid long inline style objects. A class with a stylesheet rule is easier to maintain.

Automatic Vendor Prefixes

Vue adds browser prefixes to style properties that need them, so a property like transform works across browsers without extra effort.

Summary

Class and style binding connect appearance to data. Object syntax toggles classes with true or false values, array syntax lists several classes, and computed properties keep templates tidy. The :style binding accepts an object of CSS properties for dynamic values such as widths and colors. Classes handle named states, and inline styles handle calculated values.