CSSプロパティ（色）をVueJS変数に設定

Question

rgb（redComp、greenComp、blueComp）形式を使用してクラスのCSSプロパティを設定したいとします。私はVuejsのコンポーネントコードからこれらのコンポーネントを取得したいと思います。

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

私は、CSSのようなものになりたい： -

redComp、greenCompとblueCompはVueJSコンポーネントの変数になります

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

。 これはどのように実装できますか？

Answer 1

これを実行する唯一の方法は、要素:styleをusintを計算プロパティに設定することです。テンプレートの一部で

：あなたのVUEの一部で

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

：

/... 
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を操作することはできません。 throrin19の答えのように、要素のスタイル属性を直接操作することはできますが、代わりにcssとクラスリストを使用するようにしてください。私はクラスを組み合わせることで修正できなかったスタイルの問題に決して遭遇したことはなく、その結果はより宣言的なスタイルになり、効果がより滑らかになります。私たちはあなたに吊るすロープを与えるつもりはありません。

Vueのは、あなたが、array of reactive classes<div v-bind:class="[activeClass, errorClass]">あなたが同じ配列に静的なクラスを置くことができる指定三項式を使用することができますなど

なぜあなたはこれをしたいですか？ 1つの理由は、色の変化をアニメートすることです。もしそうなら、これを行う最善の方法はCSSの移行です。あなたのコードは宣言的なままです。詳細はhereを参照してください。