【Vue3】条件によってclassを切り替える

Vue3を使って、動的なクラス名にしたい時。

ざっくりシンプルルールだけ書くと

<div :class="{'クラス名': 条件}"></div>

ざっくり条件ルールが複数ある場合

<div :class="{'クラス名': 条件,'クラス名': 条件}"></div>

ルールが1つの場合の具体例

<div :class="{'bg-blue-600 text-white': dayOfWeek === '土'}">{{ c.dayOfWeek }}<div>

ルールと条件が複数の場合の具体例

<div :class="{
'bg-blue-600 text-white': c.dayOfWeek === '土',
'bg-red-600 text-white': c.dayOfWeek === '日',
'bg-emerald-200 text-black':
c.dayOfWeek !== '日' && c.dayOfWeek !== '土',
}">{{ c.dayOfWeek }}</div>

三項演算子

<div :class="[条件 ? bg-red-300 : bg-green-300  ]"></div>

ちなみに :class は v-bind:class の省略形らしいです

コメント