前回記事「Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する」でイベントに対してのトグル機能を実装する例を紹介しました。そこでは条件によって動的に表示させる要素を分岐させましたが、今回は条件でclassなどの属性値を動的に設定する方法をまとめていきたいと思います。先述のトグル機能と合わせて使われるケースが多いのではないでしょうか。基本的には同じ要領で条件分岐をさせるイメージですが、属性値を変更する場合には「v-bind」というディレクティブを使います。  

ある条件で特定のclass名を付与する

まずはある条件でclass名を動的に追加、もしくは削除させるというトグル状にclassを設定する方法です。イベントはクリックで発火させる形で、要素に関数を設定します。そしてclass名を付与する要素に対しては、「v-bind」ディレクティブでclassを設定します。その値ですが波括弧で囲み、キーとなる部分には付与するclass名を、値には対象のデータを設定します。このデータがtrueの時に指定したclassが付与される形になります。そしてfalseになるとclassが削除されます。 【Vue】

<template>
 <div id="app">
  <button v-on:click="toggle_class()">class付与と削除</button>
  <div
   v-bind:class="{ 'elem--active' : isActive }"
  >
   ボタンクリックでこの要素に「.elem--active」のクラスが付与＆削除される
  </div>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   toggle_class: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>

   

ある条件で異なる複数のclass名を切り替える

先ほどは特定のclassを付与・削除の切り替えでしたが、今回は条件によって異なるclass名を付与して切り替えるようなケースです。イベントと関数の設定は同じですが、class切り替えの条件指定の方法が異なります。ここでは「三項演算子」という方法で条件を記述します。三項演算子はif文をそのまま式にしたようなイメージで、下記のように記述していきます。

[ 条件式 ? 'trueの時に返す値' : 'falseの時に返す値' ]

  これをv-bindで設定したclassの値に適用させていきます。先ほどは波括弧でしたが、三項演算子の場合は角括弧になるので注意します。 【Vue】

<template>
 <div id="app">
  <button v-on:click="change_class()">classの切り替え</button>
  <div
   v-bind:class="[
    isActive === true ? 'elem--active' : 'elem-inactive'
   ]"
  >
   ボタンクリックでこの要素に「.elem--active」と「.elem--inactive」のクラスが切り替わる
  </div>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   change_class: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>

  また、v-onディレクティブでもあったように、v-bindディレクティブでも下記のように省略記法が存在します。こうすることでコードもスッキリしますね。

<div :class="{ 'elem--active' : isActive }"></div>

  ちなみにですが、class以外にもidやstyleなどの属性を動的に操作する場合にもv-bindディレクティブを使います。

<div 
 v-bind:id="....."
 v-bind:style="....."
</div>

// 省略記法の場合
<div 
 :id="....."
 :style="....."
</div>

 

---

  いかがでしょうか、状態によってデザインを変える場合になどclassを切り替えたい時にはこのようなアプローチで対応するようになります。前回でもまとめていましたが、動的に要素を切り替えるのと合わせて、属性値を切り替えるのもよく使われるので覚えておきたいですね。