本記事では、Vue.jsで動的にクラスを追加する方法についてサンプルコードを用いて分かりやすく解説しています。
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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の値を保持させる
