• Vue.js

Vue.jsでclass属性を動的に追加する方法

Vue.jsでHTML要素のclass属性を動的に追加する方法について知りたい。

本記事ではv-bindを使ってこの様な悩みを解決します。

v-bindとは

v-bindとはHTML要素に含まれる属性を動的に追加・変更する事ができるディレクティブの一つです。

v-bindの使い方

<!-- CSS -->
<style>
	.blue {
		color: blue;
	}
</style>
<!-- v-bindを設定 -->
<div id="app">
	<button v-on:click.once="click">文字色をブルーに変更</button>
	<p v-bind:class="{blue}">テキスト</p>
</div>
<script>
	const app = Vue.createApp({
		data() {
			return {
				blue: false
			}
		},
		// クリックしたらデータblueの真偽値を変更
		methods: {
			click: function () {
				this.blue = !this.blue
			}
		},
	});
	app.mount("#app");
</script>

v-bindを使ったクラスを動的に変更するコード例です。

ブルー色のcolorプロパティが付与されたクラスをCSSで予め定義。

ボタン要素を押したらp要素に定義したクラスが付与され、文字色がブルーに変更される仕組みです。

v-bindの使い方は以下の通りです。

v-bind:class=”{動的に与えるデータ値}”

HTMLの属性にv-bind:classを付与します。

値に動的に与えたいクラス名を追加。

Vue.jsのデータメソッドで上記クラス名を追加。

値に真偽値を入れます。（動的に変更する前、クラス名を付与しない場合はfalse）

メソッドを使って動的に変更する仕組みを構築すれば完成です。

まとめ

Vue.jsでHTML要素のclass属性を動的に追加する方法について紹介しました。

以上で解説を終わります。