Vue v-bind Directive
Example
Using thev-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
Thev-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 withv-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 thev-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 withv-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 withv-bind is a DOM property or an attribute to the element, and bind the key appropriately. |
More Examples
Example 1
Usingv-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 theindeterminate 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 thev-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
