Sometimes, we want to add dynamic attribute in Vue.js.

In this article, we’ll look at how to add dynamic attribute in Vue.js.

How to add dynamic attribute in Vue.js?

To add dynamic attribute in Vue.js, we can use the v-bind directive or : for short.

For instance, we write

<template>
  <div id="app">
    <input
      type="text"
      :disabled="disabled"
      :placeholder="placeholder"
      v-model="value"
    />
  </div>
</template>

to set the disabled prop to the value of the disabled reactive property and placeholder to the placeholder reactive property.

Changes in those values will cause the input to re-render.

Conclusion

To add dynamic attribute in Vue.js, we can use the v-bind directive or : for short.