Vue v-bind

Vue v-bind Directive

The double curly brace syntax ({{ }}) only works for rendering text content inside an HTML tag.

You cannot use curly braces inside an HTML attribute, like src, href, or class.

To dynamically bind data to an HTML attribute, we must use the v-bind directive!

Binding Standard Attributes

The v-bind directive instructs Vue to keep the element's attribute in sync with the component's data property.

For example, if you want an image's src to update automatically, you bind it to a Vue variable.

<div id="app">
  <!-- Binds the href attribute to the linkUrl variable -->
  <a v-bind:href="linkUrl">Go to IntricateDevo</a>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        linkUrl: 'https://intricatedevo.com'
      }
    }
  });
  app.mount('#app');
</script>

The v-bind Shorthand

Because v-bind is used so frequently in Vue, there is a dedicated shorthand syntax for it.

Instead of typing v-bind:href, you can simply type :href.

This saves you a lot of typing and makes your template files look much cleaner!

<!-- Both of these lines do the exact same thing! -->
<img v-bind:src="imagePath" alt="Logo">
<img :src="imagePath" alt="Logo">

Binding Boolean Attributes

Boolean attributes (like disabled or required) work slightly differently.

If your Vue variable is true, the attribute will be added to the HTML element.

If your Vue variable is false, the attribute will be completely removed from the element!

This makes disabling buttons dynamically incredibly easy.