Sometimes, we want to add dynamic styles with variables with Vue.js.

In this article, we’ll look at how to add dynamic styles with variables with Vue.js.

How to add dynamic styles with variables with Vue.js?

To add dynamic styles with variables with Vue.js, we can use the style prop.

For instance, we write

<template>
  <img src="/img.jpg" alt="" :style="{ 'background-color': backgroundColor }" />
</template>

to set the background-color of the image to backgroundColor where backgroundColor is a reactive property.

Conclusion

To add dynamic styles with variables with Vue.js, we can use the style prop.