Categories
Vue Answers

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

Spread the love

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.

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 *