Hack Frontend Community

What are Attribute Bindings in Vue?

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

1. Define data or props

In component data or props set variables for attributes.

2

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

Add :attribute="expression" to needed element.

3

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