Vue Academy · Lesson

Attribute and Class Bindings

Bind attributes, classes, and styles dynamically.

Attribute and Class Bindings is a free Vue Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

:class Object Syntax

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 -->

Combining Static and Dynamic Classes

A static class attribute and a dynamic :class merge together.

<div class="card" :class="{ highlighted: isSelected }">
  Always has "card";
  adds "highlighted" when selected.
</div>

:class Array Syntax

Pass an array to apply a list of classes.

<div :class="[baseClass, themeClass]">Box</div>

<!-- data:
     baseClass = "panel"
     themeClass = "dark" -->

Conditionals in the Array

You can mix conditional expressions inside the array.

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

<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
  ...
</div>

Binding Inline Styles

The :style directive binds inline styles using an object.

Use camelCase property names like fontSize.

<p :style="{ color: textColor, fontSize: size + 'px' }">
  Styled text
</p>

<!-- data: textColor = "red", size = 18 -->

:style with an Array

You can pass an array of style objects, and Vue merges them.

<div :style="[baseStyles, overrideStyles]">
  Merged styles
</div>

Auto-Prefixing

When a CSS property needs vendor prefixes, Vue can add them automatically where supported by the browser.

You write the standard property
Vue applies the right prefix if needed

This keeps your style bindings clean.

Dynamic Attribute Binding

Any attribute can be bound dynamically with :attr.

<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>

Boolean Attributes

For boolean attributes like disabled, Vue includes the attribute only when the value is truthy.

<button :disabled="isSubmitting">Submit</button>

<!-- if isSubmitting is false,
     the disabled attribute is removed -->

Binding Multiple Classes Conditionally

A practical example toggling several classes at once.

<li
  class="todo"
  :class="{
    done: task.completed,
    overdue: task.isLate,
    priority: task.urgent
  }"
>
  {{ task.title }}
</li>

Quick Check

Test your understanding of class and style bindings.

Recap: Attribute and Class Bindings

You learned dynamic bindings:

:class object syntax toggles classes by truthiness
:class array syntax applies a list
:style binds inline styles with camelCase keys
Any attribute can be bound with :attr
Boolean attributes appear only when truthy

Next: component basics and communication.

Frequently asked questions

Is the “Attribute and Class Bindings” lesson free?

Yes — the full text of “Attribute and Class Bindings” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Attribute and Class Bindings”?

Bind attributes, classes, and styles dynamically. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Attribute and Class Bindings” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy