vuejs
/

Vue v-bind Directive

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

vuejs

Vue v-bind Directive

What is v-bind?

The v-bind directive is used to dynamically bind HTML attributes to Vue data.

Basic Syntax

HTMLRead-only
1
<img v-bind:src="imageUrl">

Shorthand Syntax

HTMLRead-only
1
<img :src="imageUrl">

Binding Classes

HTMLRead-only
1
<div :class="isActive ? 'active' : ''"></div>

Binding Styles

HTMLRead-only
1
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

Binding Multiple Attributes

HTMLRead-only
1
<input :type="inputType" :placeholder="placeholder">

Object Syntax

HTMLRead-only
1
<div :class="{ active: isActive, disabled: isDisabled }"></div>

Best Practices

  • Use shorthand : for cleaner code
  • Use object syntax for classes and styles
  • Keep bindings simple
  • Use computed properties for complex logic

Common Mistakes

  • Forgetting to use : shorthand
  • Writing complex logic inside bindings
  • Incorrect class binding syntax
  • Mixing static and dynamic values incorrectly

Conclusion

The v-bind directive is essential for dynamic UI in Vue. It allows flexible and reactive binding of attributes, classes, and styles.

Try it yourself

<img :src="imageUrl">
<div :class="{ active: isActive }"></div>

Test Your Knowledge

Q1
of 3

v-bind is used for?

A
Loop
B
Binding attributes
C
Condition
D
Event
Q2
of 3

Shorthand of v-bind?

A
@
B
#
C
:
D
$
Q3
of 3

Can bind styles?

A
No
B
Yes
C
Only CSS
D
Only HTML

Frequently Asked Questions

What is v-bind?

It binds HTML attributes dynamically.

What is shorthand for v-bind?

The colon (:) symbol.

Can v-bind be used for classes?

Yes, for dynamic class binding.

Previous

vue v for

Next

vue v model

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.