実務でよく使うVueのv-bind:classの使い方4つ

v-bind:classはVueで使えるv-bindディレクティブの一つです。
公式で紹介されてるものより、個人的には使い勝手がいいなと思う方法など、自分がよく使う4パターンを紹介します。

1.真偽値に対して複数クラス

例:アクティブの時はテキストを青くして背景をグレーにしたい

sample.vue

<div :class="{'text-blue bg-grey': isActive}"></div>

2.複数の真偽値

例:アクティブの時はテキストを青くして、選ばれている時は背景をグレーにしたい

sample.vue

<div :class="{ 'text-blue' : isActive , 'bg-grey' : isSelected }"></div>

3.式(演算子)を使う

比較演算子や論理演算子を使って真偽値をかえします。

sample.vue

<div :class="{'text-blue':  apple == sale }"></div>
<div :class="{'text-blue': apple > 3}"></div>
<div :class="{'text-blue': apple && banana}"></div>
<div :class="{'text-blue': apple || banana}"></div>

4.三項演算子(条件分岐)

例:アクティブの時はテキストを青くしてそうじゃなかったらテキストを黒くしたい

sample.vue

<div :class="{isActive?'text-blue':'text-black'}"></div>