[Vue.js] 3項演算子を使ったクラスバインディングを配列構文で書き換える

Vue.js

Vue.jsでは、ある条件の時だけhtmlタグにclassを設定したいという場合、下記のように3項演算子を使ってclassをバインドさせることができます。

<li :class="(viewName === 'music') ? 'is-active' : ''">Music</li>

ただし、この場合だと条件に合致しない場合の値も設定しなければならず、上記のようにブランクの文字列を記述することになります。

実はVue.jsでは配列構文を使うことでこの処理を下記のように書き換えることができます。

クラスとスタイルのバインディング#配列構文

<li :class="{'is-active': (viewName === 'music')}">Music</li>