TECHNOLOGY Minato

Vue.js入門【動的にクラス・スタイルを変更する】

こんにちは、ミナトです。

「Vue.jsで動的に見た目を変更するためにどうやってクラスを適用したらいいの？」と思われているかたのために、今回はVue.jsでの「クラスとスタイルのバインディング」について紹介します。

クラスとスタイルのバインディング

先に結論をお伝えすると、クラスのバインディングにはv-bind:class、スタイルのバインディングにはv-bind:styleを利用します。

ここからは、具体的な使い方をみていきましょう。

クラスのデータバインディングの基本

クラスのバインディングの基本的な使い方は以下の通りです。
以降CSSは共通のものを利用します。

v-bind:class="{large: isLarge}"に着目してください。VueインスタンスのdataのisLargeがtrueの時にlargeクラスがバインドされて、フォントサイズが大きくなります。
isLargeをfalseにするとクラスが適用されなくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="app">
        <p>
            hello, <span v-bind:class="{large: isLarge}">world!</span>
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    isLarge: true
  }
})
.large {
  font-size: 40px;
}

.text-red {
  color: red;
}

.text-blue {
  color: blue;
}

.bg-gray {
  background-color: lightgray;
}

複数クラスの適用

複数のクラスを適用したい場合は、「,」区切りで複数記述します。
また、text-redのように-が入ってる場合は``でかこってください。

<div id="app">
    <p>
        hello, <span v-bind:class="{large: isLarge, 'text-red': isRed}">world!</span>
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    isLarge: true,
    isRed: true
  }
})

通常のクラスとの併用

通常のクラスとv-bind:classは併用できます。
事前に適用させるクラスを指定しておき、後から動的にクラスをバインドすることが可能です。

<div id="app">
    <p>
        hello, <span class="bg-gray" v-bind:class="{large: isLarge, 'text-red': isRed}">world!</span>
    </p>
</div>

配列によるクラスのバインディング

v-bind:classに適用するクラスを配列して指定すことかできます。

v-bind:class="[largeClass, redClass]"のように任意の件数登録できます。

<div id="app">
    <p>
        hello, <span v-bind:class="[largeClass, redClass]">world!</span>
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    largeClass: 'large',
    redClass: 'text-red',
  }
})

オブジェクトによるクラスのバインディング

配列で複数のクラスを定義する場合に数が多くなるとコードの可読性が悪くなります。
そこで、dataで定義したオブジェクトをv-bind:classに指定することができます。

<div id="app">
    <p>
        hello, <span v-bind:class="classes">world!</span>
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    largeClass: {
      large: true,
      'text-blue': true
    }
  }
})

三項演算子を用いたクラスのバインディング

条件に応じてクラスを切り替えたい時には三項演算子が利用できます。

<div id="app">
    <p>
        hello, <span v-bind:class="isLarge ? largeClass : ''">world!</span>
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    largeClass: {
      large: true,
      'text-blue': true
    },
    isLarge: true
  }
})

インラインスタイルのバインディング

v-bind:styleを利用すると、インラインスタイルを設定できます。

<div id="app">
    <p>
        hello, <span v-bind:style="{ color: color, fontSize: fontSize }">world!</span>
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    color: 'red',
    fontSize: '40px'
  }
})

インラインスタイルにオブジェクトを利用

インラインスタイルのデータバインディングにオブジェクトを用いることができます。

<div id="app">
    <p>
        hello, <span v-bind:style="styles">world!</span>
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    styles: {
      color: 'green',
      fontSize: '36px'
    }
  }
})

RECOMMENDこちらの記事も人気です。