Vue.js　クラスとスタイルのバインディング

#Vue.js クラスとスタイルのバインディング

前回の記事はこちら
[Vue.js　監視プロパティ](https://qiita.com/fumiya0414/items/ba37ddcfc632ed546e12)

##クラスのデータバインディングの基本
まずはVue.jsを使ってCSSのクラスを動的に設定しましょう。
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。


```html:index/html
<div id="app">
  
  <p>Hello <span v-bind:class=" {large:isLarge} " >Vue.js!</span></p>

</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
  el:'#app',
  data:{
    isLarge:true
  }
})
```

```css:index.css
.large{
  font-size:36px;
}

```

実行結果
[![Image from Gyazo](https://i.gyazo.com/861b1ac418a65c386251f7632ff74605.gif)](https://gyazo.com/861b1ac418a65c386251f7632ff74605)

ここではcssで作成したlargeクラスをv-vindディレクティブで
isLargeの真偽値を設定して動的に設定しています。

##複数のクラスを動的に切り替える
v-vind:classディレクティブでは複数のクラスを
動的に切り替えることができます。

```html:index/html
<div id="app">
  
  <p>Hello <span v-bind:class=" {large: isLarge, 'text-danger': hasError} " >Vue.js!</span></p>

</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
	el:'#app',
  data:{
    isLarge:true,
    hasError:true
  }
 
})
```

```css:index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}
```
実行結果
[![Image from Gyazo](https://i.gyazo.com/e035ce91d340ff8905cc843956bb14ae.gif)](https://gyazo.com/e035ce91d340ff8905cc843956bb14ae)

CSSの.largeをisLargeオプションで,
.textdangerをhasErrorオプションで設定しています。

ハイフンを含むクラス名をテンプレートにキジュするときは
''で囲まないと動作しないので注意しましょう。

##プレーンなクラス属性との共存

V-bind:classディレクティブはプレーンなクラス属性と共存できます。記述は以下です。

```html:index/html
<div id="app">
  
  <p>Hello <span class="bg-gray text-blue" v-bind:class=" {large: isLarge, 'text-danger': hasError} " >Vue.js!</span></p>

</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
	el:'#app',
  data:{
    isLarge:true,
    hasError:true
  }
 
})
```

```css:index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

.bg-gray{
  background-color:gray;
}

.text-blue{
  color:blue;
}

```

実行結果１
[![Image from Gyazo](https://i.gyazo.com/b9cfb177e089921fe32bab46d230331f.gif)](https://gyazo.com/b9cfb177e089921fe32bab46d230331f)

bg-grayとtext-blueクラスがプレーンに当たっている状態から
isLargeオプションをtrueに切り替えます。
すると.largeクラスが動的に付与され文字サイズが大きくなります。

実行結果2
[![Image from Gyazo](https://i.gyazo.com/95336f7873e12d591a84c729a1e7e500.gif)](https://gyazo.com/95336f7873e12d591a84c729a1e7e500)
続いてhasErrorオプションをtrueにします。
こちらはtext-dangerクラスをバインディングしますが変化はありません。

CSSが競合した場合は読み込みの順番が優先されるため
text-dangerクラスはtext-blueクラスによって上書きされます。

##配列構文によるクラスのデータバインディング
v-bind:classではクラスのリストを渡すこともできます。
記述は以下です。
```html:index/html
<div id="app">
Hello <span v-bind:class="[largeClass , dangerClass]">Vue.js!</span> 
 
</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
	el:'#app',
  data:{
    largeClass:'large',
    dangerClass:'text-danger'
  }
 
})
```

```css:index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

.bg-gray{
  background-color:gray;
}

.text-blue{
  color:blue;
}
```

このようにブランケット[]を使うことで複数のclassを
配列構文でバインディングすることができます。

##オブジェクトデータの利用
配列構文で複数のクラスをテンプレートに渡すと
クラスの数だけ追加が必要となりコードの見通しが悪くなります。

そこでデータオプションにオブジェクトを定義して
v-bind:classに渡すことができます。
記述は以下のとおりです。

```html:index/html
<div id="app">
Hello <span v-bind:class="classObject">Vue.js!</span> 
 
</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
	el:'#app',
  data:{
    classObject:{
      large:true,
      'text-danger':true
    }
  }
})
```

```css:index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

}
```

実行結果
[![Image from Gyazo](https://i.gyazo.com/95b6697a80949f20a2fea9d27ed3b908.png)](https://gyazo.com/95b6697a80949f20a2fea9d27ed3b908)

classObjectというオプションに.largeと.text-dangerクラスを格納し
v-bind:classでバインディングすることができました。

##クラスの条件に３項演算子を使う
v-bind:classではクラスの条件に３項演算子を使うことができます。
記述は以下です。

```html:index/html
<div id="app">
<p>
  Hello <span v-bind:class="[isLarge ? largeClass : '' , dangerClass ]">Vue.js!</span> 
</p>
</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```javascript:index.js
var app = new Vue({
  el:'#app',
  data:{
    largeClass:{
      large:true,
      'bg-gray':true
    },
    dangerClass:{
      'text-danger':true
    },
    isLarge:true
  }
})
```

```css:index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

.bg-gray{
  background-color:gray;
}

.text-blue{
  color:blue;
}

```
実行結果
[![Image from Gyazo](https://i.gyazo.com/04bba12e4f8de75d58a34a3753df1a48.gif)](https://gyazo.com/04bba12e4f8de75d58a34a3753df1a48)

以下の部分が３項演算子（ifのショートハンド）です。
isLargeがtrueならlargeClassをfalseなら''を取得します。

```
isLarge ? largeClass : '' 
```

今回のテンプレートではブランケット[]を使い
３項演算子とdangerClassを配列にして渡しています。

そのためdangerClassは常に設定され
largeClassは３項演算子でisLargeオプションの
真偽値によって設定されます。

次回は条件付きレンダリングです。
[Vue.js　条件付きレンダリング](https://qiita.com/fumiya0414/items/250d6547047b16639c5f)