【Vue.js】クラスのデータバインディング

クラスのデータバインディング

クラスのデータバインディングの基本の書き方はこうなる。
例えば文字を大きくする場合
JavaScript

var vm = new Vue({
  el: '#vm',
  data: {
    isLarge: true
  }
})

HTML

<div id="vm">
   <p>
     Hello <span v-bind:class="{large: isLarge">Vue.js!</span>
   </p>
</div>

CSS

.large {
  font-size: 36px;
}

isLargeがtrueの時はVue.js!は大文字になる。
また、v-bind:classは複数適用が可能でカンマで繋げれば良い。
JavaScript

var vm = new Vue({
	el: '#vm',
  data: {
  	isLarge: true,
    hasError: true
  }
})

HTML

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

CSS

.large {
  font-size: 36px;
}
.text-danger {
  color: red;
}

配列構文での記述

cssの内容をdataの中に記述して、配列構文でv-bindを書くことができる。
JavaScript

var vm = new Vue({
  el: '#vm',
  data: {
    largeClass: 'large',  // cssのクラス名
    dangerClass: 'text-danger' 
  }
})

HTML

<div id="vm">
   Hello <span v-bind:class="[largeClass, dangerClass]">Vue.js!</span>
</div>

クラスの数が増えるとわかりづらくなるので、dataオプションにclassObjectのプロパティを作ってまとめて管理する。
JavaScript

var vm = new Vue({
  el: '#vm',
  data: {
    classObject: {
      large: true,  // クラス名
      'text-danger': true
    }
  }
})

HTML

<div id="vm">
  Hello <span v-bind:class="classObject">Vue.js!</span>
</div>

随分とみやすくなった。

三項演算子を使ってみる

三項演算子を使ってクラスの条件を分けてみる。
JavaScript

var vm = new Vue({
  el: '#vm',
  data: {
    largeClass: {
      large: true,
      'bg-gray': true
    },
    dangerClass: {
      'text-danger': true
    },
    isLarge: true
  }
})

HTML

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

CSS

.large {
  font-size: 36px;
}
.text-danger {
  color: red;
}
.bg-gray {
  background-color: gray;
}

isLargeがtrueの時、largeClassが適用される。
falseの時は三項演算子で''となっているので適用から外れる。
また、dangerClassは常に適用される。