Menu
Is it possible to add the dynamic variable in style?
I mean something like:
<style> .class_name { background-image({{project.background}}); } @media all and (-webkit-min-device-pixel-ratio : 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .class_name { background-image({{project.background_retina}}); } } </style> 
658
Vue. js provides style binding that you can use to change the style dynamically. You can bind a variable to the style attribute in any HTML tag and change the style when the bound variable is changed.
Binding Styles Dynamically To this end, Vue provides us with the v-bind:style directive. On each click event, the v-bind:style directive increments and decrements the value of your fontSize variable. This attaches the value of fontSize to the CSS font-size property.
We can conditionally add classes to a Vue component by using the v-bind:class directive. The shorthand for that is :class . to set the class according to the value of isRed . Since it's false initially, the green class will be applied.
To add dynamic styles with variables with Vue.js, we can use the style prop. to set the background-color of the image to backgroundColor where backgroundColor is a reactive property. To add dynamic styles with variables with Vue.js, we can use the style prop.
To avoid inline styles while gaining the benefit (or necessity— e.g., user-defined colors within a data payload) of dynamic styling, use a <style> tag inside of the <template> (so that values can be inserted by Vue). Use a :root pseudo-class to contain the variables so that they are accessible across the CSS scope of the application.
Or how to check it in JS.. Maybe i will found solution in that way. Yes, this is possible. Vue.js does not support style tags in templates, but you can get around this by using a component tag. Untested pseudocode: props: { color: String } computed: { style () { return `.myJSGeneratedStyle { color: $ {this.color} }`; } }
When I started using Vue.js as a front-end framework I immediately enjoyed the easy way I can set up and manage my components.
I faced the same problem. I have been trying to use a background color value from a database. I find out a good solution to add a background color value on inline CSS which value I set from database.
<img :src="/Imagesource.jpg" alt="" :style="{'background-color':Your_Variable_Name}"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
