我想使用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组件中的变量。如何实现?
3条答案
按热度按时间uurv41yg1#
唯一的方法是使用计算属性设置元素
:style
属性。在模板部件中:
在您的价值部分:
t30tvxxf2#
我也遇到过类似的问题,我需要一个基于对象数据的背景色。
这就是我的方法。
dxpyg8gm3#
2022年更新
使用Vue 3,您现在可以直接将css值绑定到React状态。
原始答案
你不能用javascript操作css,你可以直接操作元素的style属性,就像thorin19的答案一样,但是你应该试着用css和class列表来代替,我从来没有遇到过不能通过组合类来解决的风格问题,结果会在风格上更具声明性,效果也可能更流畅。
Vue允许你指定一个array of reactive classes
<div v-bind:class="[activeClass, errorClass]">
你可以把静态类放在同一个数组中,使用三元表达式等等。你为什么要这么做?一个原因是为了动画化颜色的变化。如果是这样,最好的方法是用css转换。你的代码保持声明性。查看here的细节。