Skip to content

v-bind Directive

v-bind dynamically binds one or more attributes/props to expressions. This lesson covers practical patterns, syntax, and mistakes to avoid.

Binding Attributes with v-bind

v-bind dynamically binds one or more attributes/props to expressions.

Shorthand is :attr="expr" or v-bind="object".

<img :src="user.avatar" :alt="user.name" />
<div v-bind="attrs"></div>

Attribute binds and object bind.

Class & Style

Vue special-cases `:class` and `:style` object/array syntaxes.
  • Prefer Vue 3 + Composition API.
  • Use script setup for SFCs.
  • Keep components focused.
  • Lean on official docs.

v-bind Directive Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
:class object/array Styles
:style object Inline
v-bind props parent→child Props
.prop DOM prop Modifier
.attr force attr Modifier
omit value boolean attrs Sugar

Boolean Attrs

:disabled="isDisabled" removes/adds correctly.

Common Mistakes

  • String-building class names messily when object syntax is clearer.
  • Binding unsafe URLs without care.

Key Takeaways

  • v-bind Directive is a core Vue skill.
  • Practice in a Vite app.
  • Prefer clarity.
  • Revisit docs for edge cases.

Pro Tip

Prefer :class="{ active: isOn }" over string concatenation.

You now understand v-bind directive. Next, continue with v-model to keep building your Vue skills.