Vue.jsで複数のclassを条件に合わせてつける

Vue.jsではクラスバインディングする際にclassを使用する。
条件に合わせて「フラグが立っていればクラスをつける」「変数をクラス名として入れる」事ができる。

複数の指定を使用する際の書き方を調べたのでメモ。

◆変数をそのままクラス名に使用
変数classNameに値が入っていれば、それを追加。
例）className = hogehoge;

<div class="designClass" :class="className">

↓

<div class="designClass hogehoge">

◆flgがtrueであれば、fugafugaをクラスに追加

<div class="designClass" :class="{ 'fugafuga': flg }">

↓

<div class="designClass fugafuga">

◆上記２つの複合。[]の中を処理ごとに , で区切る

<div class="designClass" :class="[className, {'fugafuga': flg}]">

↓

<div class="designClass hogehoge fugafuga">

参考サイト

Qiita: Vue.js: 複数のクラスをバインディングする場合どのような書き方があるか; https://qiita.com/FumioNonaka/items/08ab308cf1e931d4b2eb