Vue.js

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

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

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

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

参考書が苦手な人は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でイベントを定義します。

コンテンツには、クラスを動的に付与させたいためv-bind:class=”{クラス名:data}”を追加します。今回の場合ですと、クラスviewはVue.jsのdataで定義されているviewがtrueの場合に付与されます。
p {
  display: none;
}
p.view {
  display: block;
}
最初は非表示にさせたいのでコンテンツに対してdisplay:noneを設定し、クラス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の値を保持させる

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村