【Vue.js】動的にクラスを追加する方法

本記事では、Vue.jsで動的にクラスを追加する方法についてサンプルコードを用いて分かりやすく解説しています。

Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで

本書情報

著者	川口 和也
発売日	2018/9/22
ページ数	893ページ
Kindle版	○
レビュー (Amazon)	(93件)

Ｖｕｅ．ｊｓ入門 基礎から実践アプリケーション開発まで /技術評論社/川口和也

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
はじめてのVue.js 3 入門！
導入からアプリケーション開発まで体系的に学ぶ

動画情報

作成者	中村 裕太
学習時間	5時間
受講者数	12,910人
レビュー	(2,509件)

動画の詳細はこちら

v-bindディレクティブを使う

結論から話してしまうと、v-bindディレクティブを使うことで動的にクラスを追加することができます。

参考書や解説動画などでv-bindディレクティブは、リンク先を動的に変更したりv-forで指定するkeyなどで使用する使い方が多く紹介されていますが、jQueryのtoggleClass()のような使い方をすることもできます。

最短3ヶ月でエンジニアになれる！？
転職成功率98%のプログラミングスクール
DMM WEB CAMP

先輩くん

オンライン完結で24時間どこでも学習することができるよ！

後輩ちゃん

未経験から憧れのエンジニアになるぞ〜！！

おすすめポイント！

• プロのエンジニアが1対1で教えてくれる
• 履歴者・職務経歴書の作成から面接対策までサポート
• 転職後も専用コミュニティを通じてスキルアップ
• 転職率が98%と非常に高い

簡単30秒で無料相談申し込み

クラスを追加する書き方

<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でイベントを定義します。

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でクラスを動的に追加する方法についてご紹介しました。

最後にポイントを軽くおさらいしましょう。