css vue 用js变量,Vue.js动态< style>带变量

Is it possible to add the dynamic variable in style?

I mean something like:

.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}});

}

}

解决方案

The best way to include dynamic styles is to use CSS variables. To avoid inline styles while gaining the benefit (or necessity—e.g., user-defined colors within a data payload) of dynamic styling, use a

Note that some CSS values, like url() cannot be interpolated, so they need to be complete variables.

Example (Nuxt .vue with ES6/ES2015 syntax):

:root {

--accent-color: {{ accentColor }};

--hero-image: url('{{ heroImage }}');

}

Pow.