Vue v-bind
Dynamically bind attributes to data
🔗 What is v-bind?
The v-bind directive dynamically binds HTML attributes to data in your Vue app. It allows you to set attributes like src, href, class, and style based on your reactive data properties.
<!-- v-bind Example -->
<div id="app">
<img v-bind:src="imageUrl" v-bind:alt="imageAlt">
<a v-bind:href="link">Click Here</a>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
imageUrl: 'logo.png',
imageAlt: 'Logo',
link: 'https://vuejs.org'
}
}
}).mount('#app')
</script>
Output:
v-bind Use Cases
Images
Bind image sources dynamically
<img :src="imgUrl">Links
Set href attributes from data
<a :href="url">Link</a>Classes
Apply CSS classes conditionally
<div :class="active">
</div>Styles
Bind inline styles dynamically
<p :style="styles">
Text
</p>🔹 Basic v-bind Syntax
You can use v-bind: or the shorthand : to bind attributes. The shorthand is more commonly used because it's cleaner and faster to write in your templates.
<div id="app">
<!-- Full syntax -->
<a v-bind:href="websiteUrl">Full Syntax</a>
<!-- Shorthand (recommended) -->
<a :href="websiteUrl">Shorthand</a>
<!-- Multiple attributes -->
<input :type="inputType" :placeholder="placeholderText">
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
websiteUrl: 'https://vuejs.org',
inputType: 'text',
placeholderText: 'Enter your name'
}
}
}).mount('#app')
</script>Output:
🔹 Binding Classes
Vue provides special syntax for binding CSS classes. You can use objects or arrays to conditionally apply classes based on your data, making dynamic styling simple and readable.
<div id="app">
<!-- Object syntax -->
<p :class="{ active: isActive, 'text-bold': isBold }">
Object Syntax
</p>
<!-- Array syntax -->
<p :class="[baseClass, activeClass]">
Array Syntax
</p>
<button @click="isActive = !isActive">Toggle Active</button>
</div>
<style>
.active { color: green; }
.text-bold { font-weight: bold; }
.highlight { background: yellow; }
</style>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
isActive: true,
isBold: true,
baseClass: 'highlight',
activeClass: 'active'
}
}
}).mount('#app')
</script>Output:
Object Syntax
Array Syntax
🔹 Binding Inline Styles
You can bind inline styles using objects or arrays. Style properties can be written in camelCase or kebab-case, and values are automatically updated when your data changes.
<div id="app">
<!-- Object syntax -->
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Styled Text
</p>
<!-- Using data object -->
<div :style="boxStyle">
Styled Box
</div>
<button @click="textColor = 'blue'">Change Color</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
textColor: 'red',
fontSize: 20,
boxStyle: {
backgroundColor: '#42b883',
padding: '20px',
color: 'white',
borderRadius: '8px'
}
}
}
}).mount('#app')
</script>Output:
Styled Text
🔹 Binding Multiple Attributes
You can bind multiple attributes at once using v-bind without an argument. This is useful when you have an object with multiple properties that match HTML attributes.
<div id="app">
<input v-bind="inputAttrs">
<br><br>
<button v-bind="buttonAttrs">{{ buttonAttrs.value }}</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
inputAttrs: {
type: 'email',
placeholder: 'Enter email',
required: true,
class: 'form-input'
},
buttonAttrs: {
type: 'submit',
class: 'btn-primary',
value: 'Submit Form'
}
}
}
}).mount('#app')
</script>Output:
🔹 Practical Example
Here's a complete example showing v-bind in action with images, links, and dynamic styling. This demonstrates how v-bind makes your HTML truly dynamic and data-driven.
<div id="app">
<div :style="cardStyle">
<h3 :class="{ highlight: featured }">{{ title }}</h3>
<img :src="thumbnail" :alt="title" width="200">
<p>{{ description }}</p>
<a :href="readMoreUrl" target="_blank">Read More</a>
</div>
</div>
<style>
.highlight { color: #42b883; font-weight: bold; }
</style>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
title: 'Learning Vue.js',
thumbnail: 'vue-logo.png',
description: 'Master Vue.js with practical examples',
readMoreUrl: 'https://vuejs.org/guide',
featured: true,
cardStyle: {
border: '2px solid #42b883',
padding: '20px',
borderRadius: '8px'
}
}
}
}).mount('#app')
</script>