Categories
Vue Answers

How to add condition in v-bind:style with Vue.js?

Spread the love

Sometimes, we want to add condition in v-bind:style with Vue.js.

In this article, we’ll look at how to add condition in v-bind:style with Vue.js.

How to add condition in v-bind:style with Vue.js?

To add condition in v-bind:style with Vue.js, we can set the style prop to the style string we want.

For instance, we write

<template>
  <input
    type="text"
    v-bind:style="boolVariable ? 'border: 1px solid orange;' : 'border: none;'"
  />
</template>

to set the style prop to 'border: 1px solid orange;' if boolVariable is true and 'border: none;' otherwise.

Conclusion

To add condition in v-bind:style with Vue.js, we can set the style prop to the style string we want.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.