たとえば、Bootstrapでスタイルを当てると、要素にclass属性値がいくつも与えられたりします。採り上げるのは、そこにさらに、動的にバインディングしたいクラスが加わった場合です。公式サイトを含め、具体例が少なく感じたのでまとめてみました。
クラスバインディングの基本構文
HTMLクラスのバインディングの基本はオブジェクトへのバインディングです。v-bind:class(省略記法:class)ディレクティブにオブジェクトを与え、クラス名をプロパティにして、値となる式を定めます。式のブール(論理)値評価がtureなら、クラスが適用される仕組みです。
<button type="button" :class="{active: isActive}">button</button>
クラスが複数与えられた場合
たとえば、Bootstrapでつぎのようなボタンのクラスを定めたとします(「Outline buttons」参照)。これにバインディングしたいクラスが加わった場合、どのように扱うかです。
<button type="button" class="btn btn-outline-info btn-sm">button</button>
実は、クラスバインディングはclass属性を上書きしません(「コンポーネントでの使用」参照)。ですから、v-bind:class(:class)ディレクティブでクラスバインディングを加えれば済んでしまうのです。
<button type="button" class="btn btn-outline-info btn-sm"
:class="{active: isActive}">
button
</button>
けれど、クラスバインディングするのなら、ディレクティブに統一したいところです。オブジェクト構文では、つぎのように定めることになるでしょう。冗長さは否めません。なお、ハイフン(-)は識別子に使えませんので、クォーテーションで文字列にすることを忘れないでください。
<button type="button"
:class="{btn: true, 'btn-outline-info': true, 'btn-sm': true, active: isActive}">
button
</button>
配列構文を使う
もうひとつ、クラスは配列へのバインディングもできます。これなら、与えたいクラスを配列要素に加えるだけです。条件によって動的に切り替えたいクラスは、条件(3項)演算子で定められます。
<button type="button"
:class="['btn', 'btn-outline-info', 'btn-sm', isActive ? 'active' : '']">
button
</button>
配列構文の要素には、オブジェクト構文も含められます。この例では、こちらの方がすっきりするでしょう。
<button type="button"
:class="['btn', 'btn-outline-info', 'btn-sm', {active: isActive}]">
button
</button>
さらに、複数のクラスはスペース区切りでひとつの要素にまとめてしまえます。固定のクラスと動的にバインディングされるクラスがわかりやすくなりました。
<button type="button"
:class="['btn btn-outline-info btn-sm', {active: isActive}]">
button
</button>
条件演算子を使った方がよい場合
条件に応じてふたつのクラスを切り替える場合は、オブジェクト構文では要素をふたつ使わなければならないところが、条件演算子ならひとつにまとめられます。
<button type="button"
:class="['btn btn-outline-info btn-sm', isActive ? 'active' : 'disabled']">
button
</button>
複数のクラスバインディングは、書き方がいろいろ考えられます。書きやすさ、わかりやすさから、適した手法を選びましょう。