【Vue 入門】業務でよく使う動的 class の切り替え方

こんにちは、開発チームでエンジニアをしている和田です。

最近は Vue2 → Vue3 の移行作業に力を注ぐ毎日です🔥

作業中に Vue の <template /> タグで class を動的に切り替えるための記述方法を何種類も目にしたため、忘れないように一覧にまとめておこうと思いました。

ということで今回は Vue で class を動的に切り替える方法を一挙に解説させていただきます。

背景・目的

Vue で動的に class を切り替える方法について学ぶこと。

対象読者

Vue の初心者。Vue の知識を深めたい開発者。

Vue で動的に class を切り替える方法一覧

1. 真偽値による class の切り替え

<template>
  <component :class="{ 'dynamic-style': isActive }" />
</template>

簡単な真偽値のみでの class の切り替えです。
isActive が true の場合は <component /> タグに dynamic-style class が付与されます。
isActive が false の場合は <component /> タグには class は付与されません。

2. 条件式による class の切り替え

<template>
  <component :class="{ 'dynamic-style': counter > 10 }" />
</template>

条件式による class の切り替えです。
先程の isActive 変数を条件式 counter > 10 に置き換えただけですね。
counter の値が 10 より大きければ、dynamic-style class が付与され、10 以下であれば class は付与されません。

3. 複数の真偽値・条件式の組み合わせによる class の切り替え

<template>
  <component 
    :class="{
      'dynamic-style-a': isActive,
      'dynamic-style-b': isVisible,
      'dynamic-style-c': counter > 10,
      'dynamic-style-d': fruit === 'apple'
    }" 
  />
</template>

複数の真偽値や条件式との組み合わせです。
{} の中であれば , で区切ることでそれぞれ付与したい class ごとに条件を切り替えることができます。

4. 三項演算子による class の切り替え

<template>
  <component :class="isActive ? 'dynamic-style-a' : 'dynamic-style-b'" />
</template>

三項演算子を使って class の切り替えを行う場合はこのようになります。
isActive が true であれば dynamic-style-a が付与され、false ならば dynamic-style-b が付与されますね。

5. 関数による class の切り替え

<template>
  <component :class="generateClass(staffRoleId)" />
</template>

<script setup>
const generateClass = roleId => {
  switch (roleId) {
    case 1:
      return 'dynamic-style-a'
    case 2:
      return 'dynamic-style-b'
    case 3:
      return 'dynamic-style-c'
    default:
      return;
  }
}
</script>

単純に文字列を返すだけの関数を作成すれば、その返値を class として付与することもできます。 <template /> タグ内に複雑な条件を記述したくない場合などに便利かもしれません。

6. 複数の真偽値・条件式・三項演算子・関数の組み合わせによる class の切り替え

<template>
  <component 
    class="static-style-a"
    :class="[
      { 'dynamic-style-a': isActive },
      { 'dynamic-style-b': isVisible },
      { 'dynamic-style-c': counter > 10 },
      { 'dynamic-style-d': fruit === 'apple' },
      isSelected ? 'dynamic-style-e' : 'dynamic-style-f',
      isDisabled ? 'dynamic-style-g' : 'dynamic-style-h',
      generateClass(staffRoleId),
      'static-style-b'
    ]" 
  />
</template>

<script setup>
const generateClass = roleId => {
  switch (roleId) {
    case 1:
      return 'dynamic-style-i'
    case 2:
      return 'dynamic-style-j'
    case 3:
      return 'dynamic-style-k'
    default:
      return;
  }
}
</script>

これまでの総集編のような記述方法です。
:class=[] のように [] で囲うことで、真偽値・条件式・三項演算子・関数のすべてを組み合わせて書くことができます。三項演算子や関数は全体が {} で囲まれた場合だと一緒に使えないため、[] の中に書くことになります。

また、この書き方だと static-style-a のような静的な class も一緒に書けます。
ただし、:class ではなく普通の class にも静的 class は書けるためわざわざ :class の方に書く必要はないかもしれません。

[] を使った書き方であれば1~5 までの書き方に全て対応できるので、これさえ覚えておけば問題はないのですが、より簡潔なコードを書けるようになるためには 1~6 すべての書き方をいつでも書けるようにしたいですね。

まとめ

最後まで読んでくださりありがとうございました！
今回は Vue で動的に class を切り替える方法一覧を紹介させていただきました。
チーム開発では様々な人が携わる分、コードの書き方も人それぞれです。
今回紹介させていただいた記述方法は、実際に筆者が携わるプロダクトで全て登場するので、しっかりと覚えておきたいです。