v-bind (:) Bind Attributes Dynamically
Last updated: 2026-10-22
v-bind (:) Bind Attributes Dynamically
v-bind binds an expression to an HTML attribute, shorthand colon. class and style additionally accept object and array syntax.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<a v-bind:href="url">Link</a>
<img :src="imgSrc" :alt="altText">
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>⚙️ Arguments
| expression | Attribute name plus an expression; class/style accept objects and arrays; dynamic names via :[key] |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
The anchor points to the tutorial site; 'Status text' carries the hot class.💡 Key Points
💡 Tip : is shorthand for v-bind:. Boolean attributes bound to false are removed automatically.
ℹ️ Note class/style are enhanced: object form toggles by boolean, array form merges multiple sources.
💡 Tip v-bind="obj" spreads every key of an object at once (handy with $attrs).
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How to bind many attributes at once?
A v-bind="obj" spreads all keys; components commonly use v-bind="$attrs".
Q Why does class binding accept an object?
A class/style are enhanced: object form toggles by boolean, array form merges sources.
Q How to control boolean attributes?
A Binding false/null removes the attribute, true adds it — no manual empty string needed.
