Vue 3 Attribute Binding using v-bind (Multiple, Boolean and CSS Bindings)

VueJS uses a template syntax. This syntax helps bind the DOM to the component instance data while rendering. However, the template syntax does not work in the case of HTML attributes. In such a case, we need to handle Vue 3 Attribute Binding using the v-bind directive.

In this post, we will look at attribute binding in VueJS using v-bind. We will cover various cases such as single attribute, multiple attributes using object, boolean attributes as well as CSS Styling using v-bind.

1 – VueJS Template Syntax

Before we look at v-bind directive, let us look at normal binding between DOM and component instance data. In VueJS, template syntax helps carry out text interpolation.

See below example:

<h1>{{ appName }}</h1>
<h2 ref="count">Count is: {{ counter }}</h2>

This is the most basic form of binding in VueJS using the mustache syntax or double curly braces. At the time of rendering, VueJS will replace the mustache tag with the actual value of the attribute from the component instance. Whenever the appName or counter value changes, VueJS will also update the DOM.

2 – Vue 3 Attribute Binding using v-bind

While mustache syntax works fine between the HTML tags, we cannot use it inside HTML attributes.

To get around this, we need to use v-bind.

const primary = ref("primary")

<h1 v-bind:id="primary">{{ appName }}</h1>

Here, v-bind will make sure to keep the value of element’s id property in sync with the value of primary property of the component. In the above example, we make use of the VueJS Composition API approach to assign a value to the primary property.

The v-bind directive in VueJS also supports the shorthand syntax as below.

<h1 :id="primary">{{ appName }}</h1>

In this syntax, we don’t need to mention v-bind. This is an optional syntax.

3 – Vue 3 v-bind Boolean Attributes

VueJS v-bind also supports boolean attributes. We can use them to hide/show or enable/disable certain elements. Basically, boolean attributes store true/false values.

See below example:

let isResetDisabled = ref(false)

<button v-bind:disabled="isResetDisabled">Reset Counter</button>

As seen above, we set the disabled property of the button based on isResetDisabled boolean property on the component.

In this case, if the value of isResetDisabled is true or truthy, the disabled property will be included in the DOM element. For falsy value, the property will be omitted.

4 – VueJS v-bind for Multiple Attributes

We can also bind multiple attributes using VueJS v-bind directive. See below:

<script setup>

const counter = ref(0)

let incrementButton = {
  id: 'increment',
  class: 'primary',
}

let decrementButton = {
  id: 'decrement',
  class: 'secondary',
}

function increment() {
  counter.value++
  incrementButton.class = 'secondary'
}

function decrement() {
  counter.value--
  decrementButton.class = 'primary'
}

</script>

<template>
   <button v-bind="incrementButton" @click="increment">Increment</button>
   <button v-bind="decrementButton" @click="decrement">Decrement</button>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.primary {
  background: green;
  color: white;
}
.secondary {
  background: red;
  color: white;
}
</style>

For example, we have two Javascript objects incrementButton and decrementButton with a couple of attributes – id and class. Using v-bind, we can bind them directly to a single DOM element.

This is specially useful for use-cases related to CSS Binding in VueJS where we can apply or remove classes depending on some logic. When the attribute value within the object changes, it triggers a re-render and the new class is applied.

Conclusion

Vue 3 supports a bunch of attribute binding cases using the v-bind directive. It can handle single values, multiple values, boolean attributes as well as CSS style bindings.

Want to learn more VueJS concepts? Check out this post on VueJS Reactivity using Options API.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.