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.
