Have you heard about Hack Frontend Community?Join us on Telegram!

By continuing to use the platform, you accept the terms of the Privacy Policy and the use of cookies.

v-bind in Vue.js: Dynamic Attribute Binding

Attribute bindings in Vue.js allow dynamically setting HTML attribute or component prop values based on data. For this v-bind directive or its short syntax : is used.

Why Is This Important?

Reactivity. When bound property changes, Vue automatically updates corresponding attribute in DOM.
Flexibility. Can set conditional, computed and composite attribute values.
Template cleanliness. Eliminates need for manual DOM manipulation through JavaScript.

Binding Syntax

Standard Form

<a v-bind:href="url">Link</a>

Short Form

<a :href="url">Link</a>

Component Example

<template>
  <button
    :disabled="isLoading"
    :title="tooltipText"
    v-bind:data-id="item.id"
  >
    {{ isLoading ? "Loading..." : "Submit" }}
  </button>
</template>

<script>
export default {
  props: {
    url: String,
    item: Object,
    isLoading: Boolean,
    tooltipText: String
  }
};
</script>

Don't confuse with regular string:

Writing <button disabled="isLoading"> won't work — without v-bind or : Vue won't interpret value as variable.

Binding Multiple Attributes at Once

Using Object

<template>
  <img v-bind="imageAttrs" />
</template>

<script>
export default {
  data() {
    return {
      imageAttrs: {
        src: "logo.png",
        alt: "Logo",
        width: 100,
        height: 50
      }
    };
  }
};
</script>

Note:

Vue will automatically distribute all fields of imageAttrs object as <img> attributes.

Steps for Using Attribute Bindings

1. Define data or props

In component data or props set variables for attributes.

2. Use `v-bind` or `:` in template

Add :attribute="expression" to needed element.

3. Avoid quotes around expressions

Write :href="url", not :href="'url'" — otherwise it becomes string.

Note:

For binding classes and styles there are separate directives :class and :style, but they're also implemented via v-bind.

Learn more in official Vue documentation: Attribute Binding

Back

Forward

Content

Why Is This Important?Binding Syntax Standard Form Short Form Component Example Binding Multiple Attributes at Once Using Object Steps for Using Attribute Bindings