【Vue.js 2.9】はじめてのVue.js CSSのデータバインディング②（応用編）

　・classクラスオブジェクトを用意して呼ぶことも可能
　・条件式で適用を反映可能（三項演算子）
　・複数クラスオブジェクトを使う場合は配列

・クラスオブジェクトを介する呼び方
・三項演算子を使ったCSSクラスの適用判定

はじめに

今回はCSSに対するデータバインディングの少しだけ難しめな使い方の紹介です。
v-bind:class部分は前回と同じです。

【Vue.js 2.9】はじめてのVue.js プロジェクト作成からWelcomeページの表示・はじめてVue.jsを使う場合のやり方・Welcomeページを表示するまで紹介はじめに Vue.jsの学習がここから始...

環境情報

名前	詳細
Vue.js	開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタ	JSFiddle（https://jsfiddle.net/）

CSSデータバインディングの書き方

HTMLファイル、CSSのファイル、jsファイル(Vue.js）を用意します。

クラスオブジェクトを利用した呼び方

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

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <p>
    Hello <span v-bind:class='classObject'>Vue.js1!</span>
  </p>
</div>

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

Vue.js側に「classObject」のオブジェクトを用意してその中にCSSクラス名とboolean型のキーバリューを設定しています。
CSSクラス名にハイフンがあるものはシングルクォーテーションで囲っています。
適用するCSSクラスが複数ある場合はこちらの書き方のほうが便利ですね。

三項演算子を使った判定

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

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <p>
   Hello <span v-bind:class='isLarge ? largeClass : dangerClass'>Vue.js2!</span>
  </p>
</div>

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