【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>

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

コメント

タイトルとURLをコピーしました