Attribute Binding in Vue.js
From the Vue.js cheat sheet · Directives · verified Jul 2026
Attribute Binding
v-bind (:) directive and dynamic attributes
vue
<!-- v-bind (Vue 2 & 3) -->
<img :src="imageSrc" :alt="imageAlt" />
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>
<!-- Dynamic attributes (Vue 2 & 3) -->
<div :[attributeName]="value"></div>
<!-- Multiple bindings -->
<div v-bind="objectOfAttrs"></div>💡 : is shorthand for v-bind, binds expressions to attributes
⚡ Class and style bindings merge with static values
📌 v-bind without argument binds entire object as attributes
🔥 Dynamic attribute names allow runtime attribute changes
Continue with Vue.js
Save the full cheat sheet or work through every related task.