How to bind data in Vue with v-bind
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Binding data to HTML attributes dynamically is fundamental for creating reactive Vue applications with data-driven UI elements.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented countless data binding scenarios in Vue components over 25 years of development.
From my expertise, the most reliable approach is to use the v-bind directive to connect component data to HTML attributes.
This ensures reactive updates and maintains the connection between your data model and the DOM.
Use v-bind directive to bind component data to HTML attributes dynamically.
<img v-bind:src="imageUrl" v-bind:alt="imageAlt">
<button :disabled="isLoading" :class="buttonClass">Submit</button>
Here v-bind:src binds the imageUrl data property to the img element’s src attribute. The second example uses the shorthand : syntax for v-bind, binding isLoading to the disabled attribute and buttonClass to the class attribute. Vue automatically updates these attributes whenever the bound data changes, creating reactive UI updates.
Best Practice Note:
This is the same data binding approach we use in CoreUI Vue components for dynamic attribute management.
Always use the shorthand : syntax for cleaner templates, and remember that v-bind can bind any HTML attribute, including custom data attributes and ARIA properties for accessibility.
