Vue.jsの基本（7）classとスタイルのバインディング

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

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

index.htmlコード

<div class="demo" :style="{backgroundColor:color}"></div>
<input type="text" v-model="color">

CSSコード

 .demo{
        width:100px;
        height:100px;
        display:inline-block;
        margin:10px;
        background-color: #ccc;
    }

App.jsコード

var app = new Vue({
  el:'#app',
  data:{
      color:'green'
  }
})

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

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

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

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

index.htmlコード

<div id="app">
<div class="demo" @click="attach = !attach" :class="divClasses"></div>
<div class="demo" :class="{red:attach}"></div>
<div class="demo" :class="[color,{red:attach}]"></div>
</div>

CSSコード

   .demo{
        width:100px;
        height:100px;
        display:inline-block;
        margin:10px;
        background-color: #ccc;
    }

    .red{
        background-color: red;
    }
    .blue{
    background-color: blue;
    }
    .green{
    background-color: green;
    }

App.jsコード

 var app = new Vue({
  el:'#app',
  data:{
      attach:false,
      color:'green'
  },
    computed: {
        divClasses:function(){
            return{
                red:this.attach,
                blue:!this.attach
            }
        }
    }
})

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で指定した色が表示されることになります。