Attribute Binding with v-bind in Vue.js

Vue.js offers two types of binding, unidirectional and bidirectional. In this tutorial we will see unidirectional binding, which is done with the v-bind directive.

Binding is a concept present in many frameworks and technologies, allowing us to keep the value of two variables synchronized.

In Vue.js, binding will allow us to connect JavaScript data with HTML. That is, it enables us to use logic variables in HTML.

Coupled with reactivity, binding allows us to create dynamic applications where changes in data are automatically reflected in the view.

v-bind Directive

In Vue.js, v-bind is the directive that allows us to perform unidirectional binding, enabling us to dynamically link HTML attributes or component properties with data from the Vue instance.

That is, we can make any HTML attribute (like src, href, class, or style) depend on a variable or reactive expression.

The syntax of the directive is to place v-bind, followed by a colon : and the name of the attribute we want to bind (v-bind, v-bind…).

For example, like this:

<template>
  <img v-bind:src="imageUrl" alt="Dynamic image">
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://inventedimages.com/luisllamas.jpg');
</script>

Simplified Alias

Attribute binding is so common that Vue provides a simplified alias using the colon (:).

<!-- this is equivalent -->
<a :href="linkUrl">Visit Vue.js</a>

<!-- to this -->
<a v-bind:href="linkUrl">Visit Vue.js</a>

That is, the previous example we would normally write like this,

<template>
	<!-- we simply use : -->
  <img :src="imageUrl" alt="Dynamic image">
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://inventedimages.com/luisllamas.jpg');
</script>

Binding Classes and Styles

Attribute binding also allows us to dynamically link styles or classes (they are just attributes after all).

We will frequently use this to style our components dynamically. For example,

<template>
  <div :class="{ active: isActive }" :style="{ color: textColor }">
    This is a dynamic text
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(true);
const textColor = ref('red');
</script>

Using v-bind in Our Components Advanced

We can also use v-bind to pass data to a child component, along with what we call Props (we will see this when discussing components).

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup>
defineProps({
  name: String,
  age: Number,
});
</script>

<template>
  <ChildComponent :name="userName" :age="userAge" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const userName = ref('Juan');
const userAge = ref(25);
</script>