Vue v-bind Directive
Example
Using the v-bind directive to change the background color of a <div> element.
<template>
<h2>Example v-bind Directive</h2>
<p>The v-bind directive connects the style attribute of the DIV element to the 'colorVal' data property.</p>
<div v-bind:style="{ backgroundColor: colorVal }">DIV element</div>
<p>Use the input type="color" box below to change the color.</p>
<p><input type="color" v-model="colorVal"> <pre>colorVal: '{{ colorVal }}'</pre></p>
</template>
See more examples below.
Definition and Usage
The v-bind directive is used to bind an HTML attribute to a property in the Vue instance (Example above), or to pass props (Example 1 below).
If we change a Vue instance property, and that property is bound to an HTML attribute with v-bind, the HTML element will be updated with the new attribute value automatically thanks to Vue's reactivity system.
The shorthand for 'v-bind:' is simply ':', or '.' when used with the .prop modifier.
These modifiers can be used with the v-bind directive, but are often not needed:
| Modifier | Details |
|---|---|
.camel |
Transforms an attribute name from kebab-case to camelCase. This is not need when using a build step, or when using String templates. |
.prop |
Forces a binding to be set as a DOM property. Unless working with custom elements, Vue will find out if the key provided with v-bind is a DOM property or an attribute to the element, and bind the key appropriately. |
.attr |
Forces a binding to be set as a DOM attribute. Unless working with custom elements, Vue will find out if the key provided with v-bind is a DOM property or an attribute to the element, and bind the key appropriately. |
More Examples
Example 1
Using v-bind to send the 'img' prop, with data type boolean (true/false).
<template>
<h2>Example v-bind Directive</h2>
<p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
<button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
<info-box
turtle-text="Turtles can hold their breath for a long time."
v-bind:turtle-img="img"
/>
</template>
<script>
export default {
data() {
return {
img: true
}
}
}
</script>
Example 2
Using the 'v-bind:' shorthand ':'.
<template>
<h2>Example v-bind Directive</h2>
<p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
<button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
<info-box
turtle-text="Turtles can hold their breath for a long time."
:turtle-img="img"
/>
</template>
<script>
export default {
data() {
return {
img: true
}
}
}
</script>
Example 3
Using the .prop modifier to change the indeterminate DOM property of the checkbox.
<template>
<p>Using the '.prop' modifier to toggle the 'indeterminate' appearance of the checkbox:</p>
<button v-on:click="indetVal = !indetVal">Toggle</button>
<p>
<input type="checkbox" v-bind:indeterminate.prop="indetVal"> Checkbox
</p>
</template>
<script>
export default {
data() {
return {
indetVal: false
};
}
};
</script>
<style>
input {
margin: 20px;
scale: 2;
}
</style>
Example 4
Using the .prop modifier shorthand, and the v-bindshorthand, so that 'v-bind:indeterminate.prop' becomes '.indeterminate'.
<template>
<p>Using the '.prop' shorthand so that 'v-bind:indeterminate.prop' becomes '.indeterminate':</p>
<button v-on:click="indetVal = !indetVal">Toggle</button>
<p>
<input type="checkbox" .indeterminate="indetVal"> Checkbox
</p>
</template>
<script>
export default {
data() {
return {
indetVal: false
};
}
};
</script>
<style scoped>
input {
margin: 10px;
scale: 2;
}
</style>
Related Pages
Vue Tutorial: Vue CSS Binding
Vue Tutorial: Vue v-bind Directive
Vue Tutorial: Vue Props
