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属性を動的に追加する方法について紹介しました。
以上で解説を終わります。
目次