將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將是變數。 我該如何執行此操作？

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

Answer 2

你不能操縱CSS與JavaScript。你可以直接操作元素的style屬性，就像throrin19的回答一樣，但你應該嘗試使用css和class列表來代替。我從來沒有遇到過我不能通過組合類來解決的樣式問題，並且結果將更具說明性，並且可能更加流暢。我們不會給你繩索來吊死你自己。

Vue公司允許您指定array of reactive classes<div v-bind:class="[activeClass, errorClass]">你可以把靜態類在同一陣列中，使用三元表達式等

你爲什麼要這麼做？原因之一是動畫顏色的變化。如果是這樣，那麼最好的方法就是使用css轉換。你的代碼保持聲明。查看詳情here。