Vue.jsで動的にclassを設定する方法は？

417

Vue.jsでは、動的にCSSクラスを設定する方法として、v-bind:classやclassディレクティブを使用します。以下にいくつかの例を挙げます。

1. 条件に応じたクラスの切り替え

<template>
  <div :class="{ active: isActive, 'text-large': isLarge }">
    動的なクラス設定の例
  </div>
</template>

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

上記では、isActiveがtrueの場合にactiveクラスが適用され、isLargeがtrueの場合にtext-largeクラスが適用されます。

2. 配列を使ったクラスの指定

<template>
  <div :class="[isActive ? 'active' : '', sizeClass]">
    配列を使ったクラス設定の例
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      sizeClass: 'text-large',
    };
  },
};
</script>

isActiveの値によってactiveクラスが追加され、さらにsizeClassの値に基づいてtext-largeクラスが適用されます。

3. コンポーネントのデータやメソッドを使ったクラス設定

<template>
  <div :class="computeClass">
    メソッドを使ったクラス設定の例
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isLarge: true,
    };
  },
  computed: {
    computeClass() {
      return {
        active: this.isActive,
        'text-large': this.isLarge,
      };
    },
  },
};
</script>

computeClassという計算プロパティを使って動的にクラスを決定します。

4. クラスの追加に文字列を使用

<template>
  <div :class="'base-class ' + (isActive ? 'active' : 'inactive')">
    文字列を使ったクラス設定の例
  </div>
</template>

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

'base-class 'の後に条件によってactiveまたはinactiveが追加されます。