webアプリを作っている際、動的にクラス属性を切り替えたい場合があります。そのような場面で便利なVueのv-bind:classについて解説します。

v-bind:classとは？

Vueで使えるv-bindディレクティブの一つで、オブジェクトや配列を渡すことでそのデータプロパティの真偽値によってクラス属性の付与を切り替えることができます。文章だけだといまいちわからないと思いますが、クラス属性を切り替えることができることを理解してくれれば大丈夫です。v-bindディレクティブについてより広範に知りたい方は「Vueのv-bindディレクティブの書き方・使い方について解説」を参照してみてください！

v-bind:classの使い方

実際にv-bind:classを使ってしっかりと理解を深めていきましょう。

v-bind:classの書き方

v-bind:classは次のように書きます。

<div v-bind:class ={クラス名:プロパティ値}>AAA</div>

プロパティ値の真偽値がtrueのとき、v-bind:classで指定したhtml要素にクラス名が付与さえます。逆に真偽値がfalseの場合はクラス名は付与されません。

v-bind:classディレクティブの実装例

クラス名の付与の切り替えにより、CSSを動的に適用して、webページの表示を変更してみましょう。

(index.html)

<style>
  .red{
    color: red;
  }
</style>
<div id="app">
     <button v-on:click="change">クリック</button>
     <div v-bind:class ={red:isActive}>AAAAA</div>
</div>

<script>
var app = new Vue({
   el:'#app',
   data:{
      isActive:true,
   },
   methods:{
    change:function(){
     this.isActive = !this.isActive;
    }
   }
})
</script>

v-bind:classによってredクラスを付与しています。プロパティ値はisActiveとなっており、真偽値はtrueなのでクラスが付与されています。methodsプロパティで指定されているchange関数はisActiveの真偽値を逆にする処理を実行します。button要素にv-onディレクティブでchange関数を指定していて、クリックすると処理が実行されるようにしています。

実装例で出てきたv-onディレクティブやmethodsプロパティについて詳しく知りたい方は「Vueのv-onディレクティブの書き方・使い方について解説」や「Vueのmethodsプロパティの書き方・使い方について解説」を参照してみてください！

v-bind:classディレクティブの応用

配列をclass属性にバインディングさせる

クラスの配列をv-bind:classディレクティブに渡すことでたくさんのクラスを渡すことができます。

(index.html)

<div v-bind:class="[active, error]"></div>

(app.js)

new Vue({
el:"#example",
data: {
         active: 'active',
         error: 'error'
       }
})

このように表示されます。

<div class="active error"></div>

class属性にバインディングされた配列の表示を切り替える

真偽値によってクラスの切り替えもできます

(index.html)

<div v-bind:class="[{ active: isActive }, {error:isOK}]"></div>

(app.js)

new Vue({
el:"#example",
data: {
           active: 'active',
           error: 'error',
           isActive:true,
           isOK:false         
       }
})

isActiveはtrueなのでactiveは付与されますが、isOKはfalseなのでerrorは付与されません。

 ページを検証してみる次のようになっていることがわかります。

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

この記事のまとめ

本記事ではVueのv-bind:classを、実際の実装例を元に説明！最後に記事の要点をまとめてみましょう。

• v-bind:classではオブジェクトまたは配列形式でclass属性を指定して、classの適用の有無を動的に切り替えることができる。
• オブジェクト形式の際にはキーでclass名を指定して、プロパティの真偽値で適用の有無を選択する。

Vueのv-bind:classディレクティブを是非活用してみましょう！