【解説】Vue.jsの「v-class」の使い方７選【コード付き】

記事内に広告を含みます

パソ君

・v-classってどう使うの？

こんな疑問にお答えします。

「v-class」とはVue.jsのディレクティブの１つ。

動的にクラスをつけたり、削除できるのでかなり便利です。

今回は自分用のメモとして、「v-class」についてまとめてみました。

ジト

参考にどうぞ

ということで、この記事では「Vue.jsのv-classの使い方７選」について解説していきます！

この記事でわかること

Vue.jsの「v-class」の使い方７選

【解説】Vue.jsの「v-class」の使い方７選【コード付き】
【解説】Vue.jsの「v-class」の使い方７選【コード付き】：まとめ

【解説】Vue.jsの「v-class」の使い方７選【コード付き】

そんな「v-class」の使い方が主に下記の７つ↓

trueかfalseを指定
変数でtrueかfalseを指定
通常のclassと併用
シングルクォーテーションで囲み使用
オブジェクトリテラルで使用
式を用いて使用
三項演算子を用いて使用

順に見ていきましょう。

前提：「v-class」の書き方

まず大前提として「v-class」の書き方を見ておきましょう。

それがこちら↓

<p v-bind:class="">テキスト</p>

<!-- 省略形 -->
<p :class="">テキスト</p>

この「””」なかでクラス名を動的に指定することができます

➀：trueかfalseを指定

1つ目が「true」 or 「false」を指定して、動的にクラスを付与するやり方です。

<p v-bind:class="{クラス名: true or false}">テキスト</p>

<p v-bind:class="{クラス名: true or false , クラス名: true or false}">テキスト</p>

「true」なら左に書いたクラス名を付与、「false」なら付与しない形になります。

複数記述する場合は「,」で区切って指定するのが特徴です。

例となるコードがこちら↓

<!-- colorのクラス名が付与 -->
<p v-bind:class="{color: true}">テキスト</p>

<!-- colorのクラス名は付与しない -->
<p v-bind:class="{color: false}">テキスト</p>

<!-- colorとcardのクラス名が付与 -->
<p v-bind:class="{color: true , card : true}">テキスト</p>

<!-- colorのクラス名は付与しない。cardのクラス名は付与 -->
<p v-bind:class="{color: false , card: true}">テキスト</p>

出力されるコードがこちら↓

<!-- colorのクラス名が付与 -->
<p class="color">テキスト</p>

<!-- colorのクラス名は付与しない -->
<p class="">テキスト</p>

<!-- colorとcardのクラス名が付与 -->
<p class="color card">テキスト</p>

<!-- colorのクラス名は付与しない。cardのクラス名は付与 -->
<p class="card">テキスト</p>

➁：変数でtrueかfalseを指定

2つ目が変数を用いて「true」 or 「false」を指定し動的にクラスを付与するやり方です。

<p v-bind:class="{クラス名: 変数名}">テキスト</p>

<p v-bind:class="{クラス名: 変数名 , クラス名: 変数名}">テキスト</p>

変数名の値が「true」なら、左に書いたクラス名が付与されます。

例となるコードがこちら↓

<script setup>
  import { ref } from 'vue';

  const isBlock = ref(true)
  const isNone = ref(false)
</script>

<template>
    <!-- colorのクラス名が付与 -->
    <p v-bind:class="{color: isBlock}">テキスト</p>

    <!-- colorのクラス名は付与しない -->
    <p v-bind:class="{color: isNone}">テキスト</p>
</template>

出力されるコードがこちら↓

<!-- colorのクラス名が付与 -->
<p class="color">テキスト</p>

<!-- colorのクラス名は付与しない -->
<p class="">テキスト</p>

➂：通常のclassと併用

3つ目が通常の「class」と「v-bind:class」を併用するやり方です。

<p class="" v-bind:class="">テキスト</p>

タグに対してそれぞれの属性を記述します。

例となるコードがこちら↓

<!-- 通常クラスのcontainer＋colorのクラス名が付与 -->
<p class="container" v-bind:class="{color: true}">テキスト</p>

出力されるコードがこちら↓

<!-- 通常クラスのcontainer＋colorのクラス名が付与 -->
<p class="container color">テキスト</p>

④：シングルクォーテーションで囲み使用

4つ目がハイフンがつくクラスの場合、シングルクォーテーションで囲むやり方です。

<p v-bind:class="{'ハイフンありのクラス名': true}">テキスト</p>

ケバブケースの場合（ハイフンでつなぐ命名規則）、上記のように記述します。

例となるコードがこちら↓

<!-- text-colorのクラス名が付与 -->
<p v-bind:class="{'text-color': true}">テキスト</p>

出力されるコードがこちら↓

<!-- text-colorのクラス名が付与 -->
<p class="text-color">テキスト</p>

⑤：オブジェクトリテラルで使用

5つ目がオブジェクトリテラルで記述するやり方です。

<p v-bind:class="オブジェクト名">テキスト</p>

先述紹介したものと違い、｛｝で囲まず記述します。

例となるコードがこちら↓

<script setup>
  import { ref } from 'vue';

  const styleItems = ref({
    color: true,
    card: true,
    item: false
  })
</script>

<template>
  <!-- colorとcardのクラス名が付与 -->
  <p v-bind:class="styleItems">テキスト</p>
</template>

出力されるコードがこちら↓

<!-- colorとcardのクラス名が付与 -->
<p class="color card">テキスト</p>

⑥：式を用いて使用

6つ目が式を用いて、動的にクラスを付与するやり方ですね。

<p v-bind:class="{クラス名: 変数名など == 変数名など}">テキスト</p>
<p v-bind:class="{クラス名: 変数名など > 変数名など}">テキスト</p>
<p v-bind:class="{クラス名: 変数名など && 変数名など}">テキスト</p>
<p v-bind:class="{クラス名: 変数名など || 変数名など}">テキスト</p>

「>」や「&&」などを使い記述します。

例となるコードがこちら↓

<script setup>
  import { ref } from 'vue';

  const numItem = ref(10);
  const card = ref(true)
  const group = ref(false)
</script>

<template>
  <!-- numItemの値が10だったらcolorのクラスを付与 -->
  <p v-bind:class="{color: numItem == 10}">テキスト</p>

  <!-- numItemの値が５より大きかったらcolorのクラスを付与 -->
  <p v-bind:class="{color: numItem > 5}">テキスト</p>

  <!-- numItemとgroupの値が両方trueだったらcolorのクラスを付与 -->
  <p v-bind:class="{color: card && group}">テキスト</p>

  <!-- numItemかgroupの値の片方がtrueだったらcolorのクラスを付与 -->
  <p v-bind:class="{color: card || group}">テキスト</p>
</template>

出力されるコードがこちら↓

<!-- numItemの値が10だったらcolorのクラスを付与 -->
<p class="color">テキスト</p>

<!-- numItemの値が５より大きかったらcolorのクラスを付与 -->
<p class="color">テキスト</p>

<!-- numItemの値とgroupの値が両方10だったらcolorのクラスを付与 -->
<p class="">テキスト</p>

<!-- numItemの値かgroupの値のどちらかが10だったらcolorのクラスを付与 -->
<p class="color">テキスト</p>

⑦：三項演算子を用いて使用

7つ目が三項演算子を用いて、動的にクラスを付与するやり方ですね。

<p v-bind:class="変数名や式など ? 'true時のクラス名' : 'false時のクラス名'">テキスト</p>

{}を使わず、クラス名をシングルクォーテーションで囲んで記述します。

例となるコードがこちら↓

<script setup>
  import { ref } from 'vue';

  const card = ref(true)
</script>

<template>
  <!-- cardの値がtrueならcolor-trueクラスを付与。falseならcolor-falseクラスを付与 -->
  <p v-bind:class="card ? 'color-true' : 'color-false'">テキスト</p>

  <!-- cardの値がtrueならcolorTrueクラスを付与。falseならcolorfalseクラスを付与 -->
  <p v-bind:class="card ? 'colorTrue' : 'colorfalse'">テキスト</p>
</template>

出力されるコードがこちら↓

<!-- cardの値がtrueならcolor-trueクラスを付与。falseならcolor-falseクラスを付与 -->
<p class="color-true">テキスト</p>

<!-- cardの値がtrueならcolorTrueクラスを付与。falseならcolorfalseクラスを付与 -->
<p class="colorTrue">テキスト</p>