Categories
Vue Answers

How to add dynamic attribute in Vue.js?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *