Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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>
Run Example »

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>
Run Example »

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>
Run Example »

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>
Run Example »

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>
Run Example »

Related Pages

Vue Tutorial: Vue CSS Binding

Vue Tutorial: Vue v-bind Directive

Vue Tutorial: Vue Props