小开

在使用 Vue.js 时，使用 Vue.js 来更改背景，而不是 CSS:

var vm = new Vue({
el: '#vue-instance',
data: {
rows: [
{value: 'green'},
{value: 'red'},
{value: 'blue'},
],
item:""
},
methods:{
onTimeSlotClick: function(item){
console.log(item);
document.querySelector(".dynamic").style.background = item;
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
<select class="form-control" v-model="item" v-on:change="onTimeSlotClick(item)">
<option value="">Select</option>
<option v-for="row in rows">
\{\{row.value}}
</option>
</select>
<div class='dynamic'>VALUE</div>
<br/><br/>
<div :style="{ background: item}">Another</div>
</div>

小开

CSS <style>是静态的。我不认为你可以做到这一点... 你可能需要寻找一种不同的方法。

您可以尝试使用 CSS 变量

<template>
<div class="class_name" :style="{'--bkgImage': 'url(' + project.background + ')', '--bkgImageMobile': 'url(' + project.backgroundRetina + ')'}">
</div>
</template>


<style>
.class_name{
background-image: var(--bkgImage);
}
@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: var(--bkgImageMobile);
}
}
</style>

注意: 只有最新的浏览器支持 CSS 变量。

如果您仍然看到模板中 :style的任何问题，请尝试这样做,

<div :style="'--bkgImage: url(' + project.background + '); --bkgImageMobile: url(' + project.backgroundRetina + ')'">
</div>

小开

包含动态样式的最佳方法是使用 CSS 变量。为了避免内联样式，同时获得动态样式的好处(或必要性ーー 例如:。，数据负载中用户定义的颜色) ，请在 <template>内部使用 <style>标记(这样 Vue 就可以插入值)。使用 :root伪类来包含变量，以便它们可以跨应用程序的 CSS 范围访问。

注意，有些 CSS 值，就像 url()不能插值，所以它们需要是完全变量。

示例(下一个 .vue和 ES6/ES2015语法) :

<template>


<div>
<style>
:root {
--accent-color: \{\{ accentColor }};
--hero-image: url('\{\{ heroImage }}');
}
</style>
<div class="punchy">
<h1>Pow.</h1>
</div>
</div>


</template>
<script>


export default {
data() { return {
accentColor: '#f00',
heroImage: 'https://vuejs.org/images/logo.png',
}},
}


</script>
<style>


.punchy {
background-image: var(--hero-image);
border: 4px solid var(--accent-color);
display: inline-block;
width: 250px; height: 250px;
}
h1 {
color: var(--accent-color);
}


</style>

还在 Codepen上创建了一个替代的更复杂的可运行示例。

小开

我也面临同样的问题。我一直在尝试使用数据库中的背景颜色值。我找到了一个很好的解决方案，添加一个背景颜色值的内联 CSS 值，我从数据库设置。

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

小开

是的，这是可能的。Js 不支持模板中的 style标记，但是您可以通过使用 component标记来解决这个问题。未测试的伪代码:

在你的模板中:

<component type="style" v-html="style"></component>

在你的剧本里:

props: {
color: String
}
computed: {
style() {
return `.myJSGeneratedStyle { color: ${this.color} }`;
}
}

不应该使用这种方法的原因有很多。它肯定是粗糙的，而且 :style=""在大多数时候可能更好，但是对于您的媒体查询问题，我认为这是一个很好的解决方案。

小开

简单地说，在 Vue.js 和 Nuxt.js中就是这样做的:

<template>
<div>
<img :src="dynamicImageURL" alt="" :style="'background-color':backgroundColor"/>
</div>
</template>


<script>
export default{
data(){
return {
dynamicImageURL='myimage.png',
backgroundColor='red',
}
}
}
</script>

小开

我遇到了同样的问题，我想出了一个黑客，适合我的需要(也许你的)。

因为 <style>包含在 <head>中，所以有一种方法可以让它工作:

我们根据页面/组件的状态将 CSS 内容作为计算属性生成

computed: {
css() {
return `<style type="text/css">
.bg {
background: ${this.bg_color_string};
}</style>`
}
}

现在，我们将样式设置为字符串，唯一的挑战是将其传递给浏览器。

我把这个加到了我的 <head>里

<style id="customStyle"></style>

然后在页面加载后调用 setInterval。

 mounted() {
setInterval(() => this.refreshHead(), 1000);
}

我对刷新头的定义如下:

methods: {
refreshHead() {
document.getElementById('customStyle').innerHTML = this.css
}
}

小开

您可以使用 Vue.js 提供的组件标记。

<template>
<component :is="`style`">
.cg {color: \{\{color}};}
</component>
<p class="cg">I am green</p> <br/>
<button @click="change">change</button>
</template>
<script>
export default {
data(){
return { color: 'green' }
},
methods: {
change() {this.color = 'red';}
}
}
</script>

小开

使用 Vue.js 3.2你可以像这样做状态驱动的动态 CSS:

<template>
<h1 id="script">Script</h1>
<h1 id="scriptSetup">Script setup</h1>
</template>


<script>
export default {
data() {
return {
colorFromScript: 'red'
}
}
}
</script>


<script setup>
const colorFromScriptSetup = 'green'
</script>


<style>
#script {
color: v-bind('colorFromScript')
}


#scriptSetup {
color: v-bind('colorFromScriptSetup')
}
</style>

这里有一个实现

小开

Vue 3状态驱动的动态 CSS 变量

我知道这有点晚，而且正在使用 Vue.js2，但是到目前为止，在 Vue.js3中您可以创建状态驱动的 CSS 变量。

现在可以使用 v-bind()在样式标记中使用 SFC (单文件组件)状态数据。

您可以阅读关于状态驱动的 CSS 变量给你的更多信息，或者阅读 Vue.js 3文档给你。

下面是一个代码示例

例子

<template>
<div>
<input type="text" v-model="color" />
<div class="user-input-color">
\{\{ color }}
</div>
</div>
</template>


<script>
export default {
data: () => ({
color: 'white'
})
}
</script>


<style scoped>
.user-input-color {
background-color: v-bind(color)
}
</style>

这里有一个到活生生的例子的链接。

连结

小开

我需要编写完全动态的样式，所以我使用了 Vue 系统之外的方法:

{
// Other properties.
watch: {
myProp: {
handler() {
this.styleElement.innerHTML = this.myProp.css;
},
deep: true,
},
},
mounted() {
this.styleElement = this.document.createElement('style');
this.styleElement.innerText = this.myProp.css;
this.document.head.append(this.styleElement);
},
unmounted() {
this.styleElement.remove();
},
}

虽然它可能会有一些 CSS 足够大的性能问题。

小开

我喜欢@Mickey-mullin 的回复，但并不是所有的事情都能完全奏效。url错过了 require，尽管在他的文章中的信息对我的情况有很大帮助。

var()，url()，多个三元操作符(我自己的情况-你不应该需要它) ，我能够这样做的 background-image的方式:

模板

<div :style="[
case1 ? { '--iconUrl': `url(${require('../../../public/icon1.svg')})`} :
case2 ? { '--iconUrl': `url(${require('../../../public/icon2.svg')})`} :
{ '--iconUrl': `url(${require('../../../public/default.svg')})` },
]" class="myClass">

风格

div.myClass::before {
background-image: var(--iconUrl);
}

注意: 我不需要在我的 data()-> return中声明 iconUrl。

Js 用变量动态 < style >

Vue 3状态驱动的动态 CSS 变量

例子