将CSS属性（颜色）设置为VueJS变量

我想使用rgb（redComp、greenComp、blueComp）格式设置类的CSS属性。我想从Vuejs组件代码中获取这些组件

.progress {
    color: rgb(256,0,0);
    border-radius: 0px;
}

我希望CSS类似于：-

.progress {
    color: rgb(redComp, greenComp, blueComp);
    border-radius: 0px;
}

其中redComp、greenComp和blueComp将是VueJS组件中的变量。

---

如何实现这一点？

唯一的方法是使用计算属性设置元素

：style

属性

在模板部分：

<div :style="dynamicStyle"></div>

---

不能使用javascript操作css。您可以直接操作元素的样式属性，如throrin19的回答所示，但您可能应该尝试使用css和类列表。我从未遇到过不能通过组合类来解决的样式问题，结果将在样式上更具声明性，并且可能在效果上更平滑。我们不会让你上吊的

Vue允许您指定一个

，您可以将静态类放在同一数组中，使用三元表达式等

---

你为什么要这样做？其中一个原因是要使颜色变化具有动画效果。如果是这样，最好的方法就是使用css转换。您的代码保持声明性。查看详细信息。

我遇到了类似的问题。我需要有一个基于对象vue数据的背景色

这就是我的方法

newvue({
el:“应用程序”，
数据：{
获取问题答案：[
{
名称：“foo”，
颜色：{
红色：“0”，
绿色：“0”，
蓝色：“0”
}
},
{
名称：'酒吧'，
颜色：{
红色：“127”，
绿色：“127”，
蓝色：“127”
}
},
{
名称：“baz”，
颜色：{
红色：“255”，
绿色：“255”，
蓝色：“255”
}
}
]
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
颜色：红色；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
瑞德先生{
颜色：红色；
}

{{group.name}

这与我的用例（操纵背景颜色）非常相似，您的示例对我来说确实有效。

/...
computed : {
    dynamicStyle() {
        return {
            // in the case of redComp, greenComp and blueComp are a vue prop or data
            color : `rgb(${this.redComp}, ${this.greenComp}, ${this.blueComp});`,
        };
    },
},
/...