Vue

【Vue.js 2.9】はじめてのVue.js CSSのデータバインディング①（基本編）

  /

・v-bind:classの基本的な使い方

はじめに

今回は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;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <p>
    Hello <span v-bind:class="{large: isLarge}">Vue.js!</span>
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      isLarge: true
    }
})

注意すべきところは、HTMLファイル側の4行目です。
「v-bind:class=”{large: isLarge}”」にて、CSSのlargeクラスを適用するか判定しています。
isLargeはVue.js側でtrueになっているのでlargeクラスが適用され大きな文字サイズとなります。

書き方②（複数クラス）

.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="{large: isLarge, 'text-danger': hasError}">Vue.js!</span>
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      isLarge: true,
      hasError: true
    }
})

CSSデータバインディングはカンマ区切りによって複数のクラスにも適用できます。
CSSクラス名にハイフンがある場合は、シングルクォーテーションなどで括る必要があります。

書き方③（dataプロパティで直接CSSクラス名を設定）

.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='[largeClass, dangerClass]'>Vue.js!</span>
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      largeClass: 'large',
      dangerClass: 'text-danger'
    }
})

条件式によってCSSクラスを適用するか判定する場合は①・②の書き方でも良いと思いますが、特定のCSSクラスを適用する場合は不向きです。
変数の値にCSSクラス名を直接設定することで特定のCSSクラスを適用することも出来ます。

複数のクラス名を呼ぶ場合は②と違い、配列で呼ぶ必要があるため大カッコで括ります（[]）

CSSクラスの共存と競合について

「v-bind:class」と「class」が共存する場合があります。
「v-bind:class」もDOM生成時には「class」化されるので基本的には共存というか「1つのclass」として両方とも適用されます。

また、上記によってCSS側で類似デザイン（文字色を変える2つのクラスとか）が適用される場合もあります。
そのような場合、CSSは上から下に処理されるため、下にある方が画面上に適用されます。

参考記事

クラスとスタイルのバインディング
https://jp.vuejs.org/v2/guide/class-and-style.html

RELATED POST