本記事では、Vue.jsで動的にクラスを追加する方法についてサンプルコードを用いて分かりやすく解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで
v-bindディレクティブを使う
結論から話してしまうと、v-bindディレクティブを使うことで動的にクラスを追加することができます。
参考書や解説動画などでv-bindディレクティブは、リンク先を動的に変更したりv-forで指定するkeyなどで使用する使い方が多く紹介されていますが、jQueryのtoggleClass()のような使い方をすることもできます。
最短3ヶ月でエンジニアになれる!?
転職成功率98%のプログラミングスクール
DMM WEB CAMP
- プロのエンジニアが1対1で教えてくれる
- 履歴者・職務経歴書の作成から面接対策までサポート
- 転職後も専用コミュニティを通じてスキルアップ
- 転職率が98%と非常に高い

クラスを追加する書き方
クラスを追加する書き方は以下の通りです。<p v-bind:class="{クラス名:データ}">コンテンツ内容</p>
クラスには付与させたいクラス名を書きます。
データにはtrueとfalseのBooleanを設定しクラスを付与させたいタイミングでデータないの値を書き換えます。
クラスを追加するサンプルコード
こちらで紹介するサンプルコードは、ボタンをクリックするとコンテンツが表示・非表示になる内容です。
<div id="app">
<button v-on:click="toggleBtn">表示・非表示</button>
<p v-bind:class="{view:view}">コンテンツ内容</p>
</div>
コンテンツの内容を表示・非表示切り替えをするトリガーとなるボタンと表示・非表示させたいコンテンツを作成します。ボタンをクリックした時に、処理を実行させたいためv-on:clickでイベントを定義します。
コンテンツには、クラスを動的に付与させたいためv-bind:class=”{クラス名:data}”を追加します。今回の場合ですと、クラスviewはVue.jsのdataで定義されているviewがtrueの場合に付与されます。p {
display: none;
}
p.view {
display: block;
}
new Vue({
el: "#app",
data: function () {
return {
view: false,
};
},
methods: {
toggleBtn: function () {
this.view = !this.view;
},
},
});
data内にクラスを付与させる判断をするviewを定義に値にfalseを設定します。ここにfalseを設定することで最初の描画で非表示の状態にすることができます。
続いて、v-on:clickで呼び出されるメソッドを定義し、現在viewが保持している逆の値に書き換えます。値がtrueの場合はfalseを、falseの場合はtrueといった感じです。
まとめ
今回はVue.jsでクラスを動的に追加する方法についてご紹介しました。
最後にポイントを軽くおさらいしましょう。
- 動的にクラスを追加させたい要素に対してv-bind:class=”{クラス名:データ}”を追記する
- v-bindで指定するデータには、trueとfalseの値を保持させる