はじめに
web アプリを作っている際、動的にクラス属性を切り替えたい場合があります。そのような場面で便利な Vue のv-bind:classについて書きます。
v-bind:class とは
Vueで使えるv-bindディレクティブの一つで、オブジェクトや配列を渡すことでそのデータプロパティの真偽値によってクラス属性の付与を切り替えることができます。
書き方
プロパティ値の真偽値が true のとき、v-bind:class で指定した html 要素にクラス名が付与さえます。逆に真偽値が false の場合はクラス名は付与されません。
<div v-bind:class="{クラス名:プロパティ値}">AAA</div>
実装例
以下では、v-bind:classによってblueクラスとredクラスをtoggledプロパティの真偽値によって付与しています。
methodsで指定されているtoggle関数はtoggledの真偽値を逆にする処理を実行します。
See the Pen VueJS - Usage of v-bind:class by TokioTakamiya (@tktaka) on CodePen.