Mastering JS
Tutorials Newsletter eBooks Jobs
Tutorials Newsletter eBooks Jobs
Tutorials / Vue /

Using v-bind in Vue

Aug 9, 2019

In Vue, v-bind lets you bind an HTML attribute to a JavaScript expression. There are two broad use cases for this one-way data binding:

Binding to Built-in Attributes

You can use v-bind to bind built-in HTML attributes to JavaScript expressions. For example, you can make a link whose href is bound to a data field. When the link field changes, so does the href.

const app = new Vue({
  data: () => ({ link: 'http://google.com' }),
  // Initially, the link will go to Google...
  template: `
    <a v-bind:href="link">My Link</a>
  `
});
// Now, the link will go to Twitter.
app.$data.link = 'http://twitter.com';

You can use this syntax for some cool use cases, including dynamic inline style attributes.

const app = new Vue({
  data: () => ({ color: 'blue' }),
  // Initially, will show "blue text" in blue font.
  template: `
    <div v-bind:style="{ color }">{{color}} text</div>
  `
});
// Now, it will show "green text" in green font.
app.$data.color = 'green';

Props

You can also use v-bind to pass props to child components.

// `props` is an array of prop names this component accepts. If you
// don't explicitly list a prop in `props`, you won't be able to use
// it in your template.
Vue.component('hello', {
  props: ['name'],
  template: '<h1>Hello, {{name}}</h1>'
});

// The app tracks `name` as internal state, and there's an input to
// modify `name` using `v-model`. Then, `v-bind:name` passes `name` as
// a prop to the `hello` component.
const app = new Vue({
  data: () => ({ name: 'World' }),
  template: `
    <div>
      <div>
        <input v-model="name"></input>
      </div>
      <hello v-bind:name="name"></hello>
    </div>
  `
});

Shorthand

The v-bind part of v-bind:prop is optional. You can also use :prop. Most large Vue codebases use :prop and avoid typing out v-bind.

const app = new Vue({
  data: () => ({ link: 'http://google.com' }),
  // `:href` is the same ad `v-bind:href`, just more concise.
  template: `
    <a :href="link">My Link</a>
  `
});
Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

More Vue Tutorials