解 説

classとスタイルのバインディングは少し慣れる必要がありますが、覚えると便利に活用できるようになります。

まずは、単純なスタイルのバインディングの方法の例です。サンプルコードは以下のようになります。

入力ボックスの値をスタイルに適用した例

index.htmlコード

CSSコード

App.jsコード

1行入力ボックスに入力した色の名前が「class=”demo”」の四角形の背景色にリアルタイムに反映されます。

v-modelディレクティブを使用することで input 要素 などの入力フォームのバインディングを行うことができるようになります。
この例ではinput要素のv-modelとAPP.jsのdataプロパティと四角形の:style=”{backgroundColor:color}が連動しています。
そしてdataプロパティの値が変更されるとVue.jsは自動で再レンダリングするわけです。

class名を使ったスタイルの変更

今度はclass名を活用してスタイルの変更を行います。

初期状態
左端の青い四角形をクリックした後の状態

index.htmlコード

CSSコード

App.jsコード

attachの値をfalseとdataに記述しておいて、さらに属性に「@click=”attach = !attach” 」と記述することで、初期値はfalseでクリックしたらtrueにすることができます。

続いて、「:class=”divClasses”」としてcomputedのプロパティを呼び出しています。attachの値がtrueならredと入り、falseならblueの値が入ります。

最初のclass=”demo”四角形の初期状態は、attachの値はfalseのため青となり、クリックするとattachの値はtrueになって赤となります。

2番目のclass=”demo”四角形は「:class=”{red:attach}”」となっていますので、attacheの値がtrueの時だけclass=”red”となり、falseの場合はredの値が入りません。つまり一番左の四角形をクリックすると赤くなる仕掛けです。

3番目のclass=”demo”四角形は「:class=”[color,{red:attach}]”」でattachの初期値はfalseなのでcolorの値が入ります。colorの値は下の1行入力ボックスに入力された値が入ります。CSSで準備したclass名と同じ前が入力されるとCSSで指定した色が表示されることになります。