Vue.js のクラスバインディング　書き方いろいろ

Vue.jsで要素にクラスをバインディングするときのパターン。

Vueの中にこんな感じのdataがあったとする。

newVue({el:"#app",data:{foo:true,bar:false,baz:8}})

オブジェクトで

fooがtrueだったらfoo-classクラスをバインディング。

<p:class="{ 'foo-class': foo }">
  Hello
</p>

複数個、並べて書ける。

<p:class="{ 'foo-class': foo, 'bar-class': bar }">
  Hello
</p>

もっとたくさん。

<p:class="{ 'foo-class': foo, 'bar-class': bar, 'baz-class': baz > 6 }">
  Hello
</p>

配列の中にクラスを入れてバインディング。

<p:class="['foo-class', 'bar-class', 'baz-class']">
  Hello
</p>

配列の中に、オブジェクトを入れることもできる。
fooがtrueだったらfoo-classをバインディング。そこに加えて、bar-classとbaz-classもね。

<p:class="[{ 'foo-class': foo }, 'bar-class', 'baz-class']">
  Hello
</p>

配列の中で、三項演算子式も使える。
fooがtrueだったらfoo-classをバインディング。fooがfalseだったら何もつけないよ。

<p:class="[foo ? 'foo-class' : '']">
  Hello
</p>

（三項演算子式を一つだけ書くなら別に配列に入れなくても良いんだけどね・・・）

<p:class=" foo ? 'foo-class' : '' ">
  Hello
</p>

配列に入れると、三項演算子式に加えて、クラス、クラス・・・みたいなこともできる。

<p:class="[foo ? 'foo-class' : '', 'bar-class', 'baz-class']">
  Hello
</p>

もちろん、三項演算子式、三項演算子式、三項演算子式・・・みたいなこともできるよ。

<p:class="[foo ? 'foo-class' : '', baz ? 'bar-class' : '', baz > 6 ? 'baz-class' : '']">
  Hello
</p>

Vue.js たのしい！