vueJsで動的スタイルを使用する方法

Question

vueJsコンポーネントでデータを取得する方法はありますか？<スタイル>セクション内の値を使用しますか？

のようなもの：

<my-component color="red" /> 

と<スタイル>コンポーネントのセクション内の動的な値として、赤を使用します。

Answer 1

v-bindは、hereのようにvue.jsの動的スタイリングに役立ちます。

v-bindのオブジェクトシンタックスはかなり簡単です.JavaScriptオブジェクト以外はCSSとほとんど同じです。あなたは、CSSプロパティ名のキャメルケースやケバブケース（ケバブ-ケースで引用符を使用）のいずれかを使用することができます。

HTML

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 

VUEインスタンス

data: { 
    activeColor: 'red', 
    fontSize: 30 
} 

今度はactiveColorが反応します。activeColorを変更すると、HTML/CSSでも同様に変更されます。