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

Question

我想使用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;
}

在VueJS组件中，redComp、greenComp和blueComp将是变量。如何实现呢？

- benedemon

Answer 1

唯一的方法是使用计算属性设置元素的:style属性。 在您的模板部分中：

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

在你的Vue部分：

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

- throrin19

Answer 2

更新 2022

使用 Vue 3，您现在可以直接将 CSS 值绑定到响应式状态。

原始回答

您无法使用 JavaScript 操纵 CSS。您可以像 throrin19 的回答一样直接操纵元素的 style 属性，但最好尝试使用 CSS 和类列表。我从未遇到过不能通过组合类来解决的样式问题，而且结果将更具声明性和平滑度。

Vue 允许您指定一个响应式类数组<div v-bind:class="[activeClass, errorClass]">。您可以将静态类放入同一数组中，使用三元表达式等。

您为什么要这样做？其中一个原因是为了动画颜色变化。如果是这样，最好使用 CSS 过渡方式。您的代码保持声明性。详见此处。

- bbsimonbb

Answer 3

我遇到了类似的问题。我需要根据Vue对象中的数据设置背景颜色。

所以这是我的解决方案。

new Vue({
  el: "#app",
  
  data: {
    getQuestionAnswers: [
        {
        name: 'foo',
        color: {
            red: '0',
            green: '0',
            blue: '0'
        }
      },
      {
        name: 'bar',
        color: {
        red: '127',
        green: '127',
        blue: '127'
        }
        
      },
      {
        name: 'baz',
        color: {
        red: '255',
        green: '255',
        blue: '255'
        }
      }
    ]
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: red;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div 
    
    v-for="(group) in getQuestionAnswers"
    
  
  >
  <div :style="{ 'background-color': `rgb(${group.color.red}, ${group.color.green}, ${group.color.blue})`}">
        {{ group.name }}  
  </div>

  </div>
</div>

- Felipe Leivas Machado

---

这与我的用例非常相似（操作背景颜色），你的示例对我很有帮助。 - Marcel