Vue.jsのv-bind:classで動的なクラス割り当て

Vue.jsで動的(条件を満たす場合)にクラスを割り当てる方法として、v-bind:classがあります(v-bindは省略可能)。
動的に割り当てるパターンとしては色々考えられますよね。
単純にある条件を満たした時にクラスを割り当てるパターン、条件Aを満たした時にクラスAを割り当て、条件Bを満たした時にクラスBを追加で割り当てるパターンなどなど...
今回はそのパターンに合わせた入力方法をご紹介します。

ある条件を満たした時にクラスを割り当てる方法

今回は例として、isActiveAがtrueの場合にclassAというクラスが割り当たるとします。
一番シンプルなパターンで、動的に割り当てる時に最もよく使われる書き方です。
ログインしている時にあるクラスを割り当ててスタイルを適用させたい、など使用用途は様々考えられますね。
書き方としては以下のようにコロン(:)で挟んで割り当たるクラスをコロンの前、条件を後ろに書くことになります。

<div v-bind:class="{classA: isActiveA}"></div>

クラスはシングルコーテーションで挟んでも問題ありません。

<div v-bind:class="{'classA': isActiveA}"></div>

クラス名の中に「-」などの記号が入る場合は、むしろシングルコーテーションで囲まないと以下のようなエラーになります。

- invalid expression: Unexpected token - in

v-bindは省略可能なので、以下の書き方も可能です。

<div :class="{classA: isActiveA}"></div>

<div :class="{'classA': isActiveA}"></div>

ある条件を満たした時にクラスを複数割り当てる方法

これは上記のやり方の応用になりますが、isActiveAがtrueの場合にclassAというクラスとclassBというクラスの両方が割り当たるとします。
クラス1つ1つに細かくスタイルを割り当てている場合にあり得るかもしれませんね。
この場合、単純に両方をシングルコーテーションで囲ってしまえば大丈夫です。

<div v-bind:class="{'classA classB': isActiveA}"></div>

シングルコーテーションで囲まない場合は以下のようなエラーが発生するので要注意です。

- invalid expression: Unexpected identifier in

ある条件Aを満たした時にクラスAを割り当て、ある条件Bを満たした時にクラスBを割り当てるなど、複数のクラスを割り当てる方法

先ほどの複数パターンですね。
今回は例として、isActiveAがtrueの場合にclassAというクラスが割り当たり、isActiveBがtrueの場合にclassBというクラスが割り当たるとします。
これもログインしている時にあるクラスを割り当ててスタイルを適用させたい、メニューを開いている時に別なクラスを割り当ててスタイルを適用させたい...などなど使用用途はたくさん考えられます。
書き方としては、以下のようにカンマ(,)で連結させれば複数パターンに対応できます。

<div v-bind:class="{classA: isActiveA, classB: isActiveB}"></div>

これも同じようにv-bindは省略可能なので、以下の書き方も可能です。

<div :class="{classA: isActiveA, classB: isActiveB}"></div>

三項演算子で条件次第で別々のクラスを割り当てる方法

例えば、isActiveがtrueの場合はclassA、falseの場合はclassBが割り当たるなど、条件によって別々なクラスを割り当てたい場合などに使えます。
先ほどの複数パターンで割り当てる方法でも以下のようにすればできます。

<div v-bind:class="{classA: isActiveA === true, classB: isActiveA === false}"></div>

しかしこれだとどう見ても冗長で可読性が悪いですね。
こんな時は三項演算子を使用して以下のように書くことができます。
※三項演算子を使用する時はクラス名をシングルコーテーションで囲み、かっこは「{}」に代わって「[]」で囲まなければ反映されないので、そこだけ注意してください。

<div v-bind:class="[isActiveA === true ? 'classA' : 'classB']"></div>

シンプルに書けて可読性があがりましたね！
さらにv-bindを省略して

<div :class="[isActiveA === true ? 'classA' : 'classB']"></div>

となります。

三項演算子を複数使いたい時は、これも以下のようにカンマで繋げばOKです。

<div v-bind:class="[isActiveA === true ? 'classA' : 'classB', isActiveC === true ? 'classC' : 'classD]"></div>

慣れてしまえば問題ないですが、パターンによってはシングルコーテーションで囲まないと反映されないことがあるなど、詰まってしまうポイントはいくつかあるのでそこだけ要注意です。

基礎から学ぶ Vue.js