【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

Vue.jsの学習におすすめ書籍
Vue.js入門 基礎から実践アプリケーション開発まで
総合評価
( 5 )
メリット
  • Vue.jsを初歩から実践まで徹底的に解説
  • Javascript初心者でも分かりやすい
楽天ブックス
¥3,718 (2024/05/22 16:47時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

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

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

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

クラスを追加する書き方

クラスを追加する書き方は以下の通りです。

<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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次