【Vue.js】動的クラスとスタイルを切り替える方法｜v-bindと条件分岐の組み合わせ

Vue.jsでは、状態に応じてクラス名やスタイルを動的に変更する機能が用意されています。これにより、ユーザーの操作やデータの状態に応じた柔軟なUI表現が可能になります。本記事では、v-bindと条件分岐を使った動的クラス／スタイルの切り替え方法を実例付きで解説します。

クラスの切り替え：オブジェクト構文

v-bind:class（略して:class）では、オブジェクト構文を使って条件付きでクラスを適用できます。

<template>
  <div :class="{ active: isActive, error: hasError }">
    状態によってクラスが変わる要素
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

この例では、isActiveがtrueのときにactiveクラス、hasErrorがtrueのときにerrorクラスが追加されます。

クラスの切り替え：配列構文

複数のクラスを条件に応じてリストとして切り替えたい場合は、配列構文が便利です。

<div :class="[baseClass, isActive ? 'is-active' : '', hasError && 'has-error']">
  条件付きクラス（配列）
</div>

このように、配列内に条件演算子を使って柔軟にクラスを追加できます。

インラインスタイルの切り替え

v-bind:style（略して:style）を使えば、CSSプロパティをオブジェクトとして直接バインドできます。

<div :style="{ color: isActive ? 'green' : 'gray', fontSize: fontSize + 'px' }">
  状態によって色とサイズが変化
</div>

<script>
export default {
  data() {
    return {
      isActive: true,
      fontSize: 18
    }
  }
}
</script>

CSSクラスと組み合わせた制御

スタイルとクラスを併用することも可能です。たとえば、classでアニメーションや背景色、styleで動的な数値（幅やサイズ）を指定するようなケースです。

<div
  :class="{ highlight: isHovered }"
  :style="{ width: progress + '%', transition: 'width 0.3s' }"
>
  ローディングバー
</div>

まとめ

Vue.jsではv-bind:classやv-bind:styleを使うことで、状態に応じたクラスやスタイルの切り替えを柔軟に制御できます。UIの状態変化を視覚的にわかりやすくすることで、ユーザー体験の向上にもつながります。オブジェクト・配列・三項演算子などを組み合わせて、用途に合った記述を選ぶと良いでしょう。