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

其中redComp，greenComp和blueComp将是VueJS组件中的变量。我该如何实现呢？

Answer 1

唯一的方法是将元素:style属性usint设置为计算属性。

在模板部分：

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

Answer 2

你不能用javascript操纵css。您可以直接操作元素的style属性，如throrin19的答案，但您应该尝试使用css和类列表。我从来没有遇到一个我无法通过组合类来解决的风格问题，结果将更具说明风格，并且可能更加平滑。我们不会给你绳索吊死自己。

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

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

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>

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

3 个答案: