【Vue.js 】クラスのバインディング（v-bindディレクティブ）

バインディングとは

データと対象を結びつけること。
ここでいうバインディングとはjavascript(typescript)で定義しているデータをHTMLタグ（CSSや属性）に紐づけること。
Vueでは定義しているデータに変化があれば自動でDOMを更新してくれる。

クラスのバインディング

Vueではv-bindディレクティブを用いてバインディングすることでクラスを動的に切り替えること（クラスを付与したり外したり）ができる。

基本構文

<div v-bind:"{ クラス名: データプロパティ }"Hello</div>

<div v-bind:"{ active: isActive }">Hello</div>

データプロパティの真偽値によってクラスの有無が決まる
isActiveの値がtrueであればクラスが有効になり、falseであればクラスは無効になる。

プレーンなclass属性との併用も可能

sample.vue

<template>
  <div
    class="static"
    v-bind:class="{ active: isActive }"
  >
  </div>
</template>

isActiveの値がtrueであればactiveクラスが追加され下記のようになる

sample.vue

<template>
  <div class="static active"></div>
</template>

スタイルをつけて動きをみてみる

sample.vue

<template>
  <div id="app">
    <div
      class="static"
      v-bind:"{ active : isActive }"
    >Hello</div>
  </div>
</template>

<script>
  new Vue({
    el: '#app',
    data: {
      isActive : true,
    },
  )}
</script>

<style>
  .active {
    color: red;
  }
</style>

activeクラスが付与されたので「Hello」が赤色の文字で表示される

クラスをバインディングしてモーダルを表示/非表示

sample.vue

<template>
  <div class="SamplePage_message">
    <p>メッセージを表示</p>
    <!-- クリックイベント handleModalOpen関数が呼び出される -->
    <button class="SamplePage_messageButton" @click="handleModalOpen">
      Open
    </button>
  </div>
  <!-- ここからモーダル -->
　<!-- クラスのバインディング -->
　<!-- 論理否定が指定されているので返ってきたisModalVisibleを逆の値で返す -->
  <div
  class="SamplePage_modal"
  :class="{ 'SamplePage_modal--hidden' : !isModalVisible }"
  >
    <div class="SamplePage_modalContent">
      <h1 class="SamplePage_modalContentTitle">
        Hello!
      </h1>
　　　 <!-- クリックイベント handleModalClose関数が呼び出される -->
      <button 
      class="SamplePage_modalContentButton"
      @click="handleModalClose"
      >
        Close
      </button>
    </div>
  </div>
</template>

<script>
export default class SamplePage extends Vue {
　// 初期値をfalseで設定
  public isModalVisible = false;
　// handleModalOpen関数が呼び出されたらisModalVisibleをtrueで返す
  public handleModalOpen() {
    this.isModalVisible = true;
  }
  // handleModalClose関数が呼び出されたらisModalVisibleをfalseで返す
  public handleModalClose() {
    this.isModalVisible = false;
  }
}
</script>

<style lang="scss>
.SamplePage {
  &__message {
    text-align: center;
    margin: 40px 0;
  }
  &__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    &--hidden {
       display: none;
    }
    &Content {
      width: 80%;
      margin: 20px auto;
      padding: 16px;
      background-color: #f2f2f2;
      text-align: center;
    }
  }
}
</style>

※ここではv-bind:classを省略して:classと記述している
※クラス名にハイフンやアンダーバーを含む場合、' '（シングルコーテーション）で囲む必要がある

インラインで記述しなくてもOK

v-bind:classの{ active : isActive }の部分はデータプロパティ名を入れて表現することもできる。

<div v-bind:class="classObject">Hello</div>

data.js

data: {
  classObject: {
    active: true,
  },
},

配列構文

v-bind:classに配列を渡してクラスのリストを適用することも可能

<div v-bind:class="[activeClass, errorClass]"></div>

data.js

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

activeClassとerrorClassどちらも常にtrueということになるので下記のようなコードになる

<div class="activeClass errorClass"></div>

三項演算子式を用いる

配列内のクラスを条件に応じて切り替えたい場合は三項演算式を用いる。

<div v-bind:class="[isActive ? activeClass : '',errorClass]"></div>

この場合、errorclassクラスは常に適用されている状態だが、activeClassクラスはisActiveがtrueの場合にだけ適用される。

三項演算子式

if文の省略形、または代替文。3つの値と式を必要とする特殊な演算子。条件に基づいて２つの値のうち１つを選ぶ。
基本構文

条件式 ? trueの処理 : falseの処理

condition ? active : error

・conditionでtrueかfalseか判断
・trueの場合はactiveの処理が実行
・falseの場合はerrorの処理が実行