みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
Vue.jsの解説シリーズです。
今回はクラス名を変更する方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- クラス名の付与の仕方がわかる
- v-bindが理解できる
- クリックイベントv-onの復習ができる
Vue.jsを使いこなそう！
Vue.jsを使ってクラス名を変更しよう
v-bindを使おう
v-bindとは、HTMLの属性を設定できるディレクティブです。
<div v-bind:class="変数"></div>
省略形
<div :class="変数"></div>という記述をすることで、Vue.jsでクラス名を管理できます。
<div class=”クラス名” v-bind:class=”変数”></div>
というように、通常のclass属性と併用もできるよ！
マスタッシュ構文→{{変数名}} じゃダメなの？？
結論：ダメです。
マスタッシュ構文は、HTMLの属性
つまりタグの内部では使えません。
その問題を解決するために存在するのが
v-bindディレクティブです。
これはダメ
<div class={{変数}}></div>使用方法１:任意のクラスを付与しよう
以下はボタンをクリックすると0,1,2の乱数が生成され、
その値によってボタンのクラス名を書き換える処理です。
See the Pen v-bind クラス名の変更 by samehack (@samehack) on CodePen.
this.myClass = ["blue", "font-color-white"];という記述がありますが、クラス名を配列形式で設定することで
複数のクラス名を付与することが可能です。
使用方法２:真偽値を渡してクラス名を付与するか判定しよう
以下は、isZeroという真偽値をVue.jsで管理し
isZeroがtrueの場合のみ、クラス名 .red を付与しています。
See the Pen v-bind クラス名の変更 by samehack (@samehack) on CodePen.
ボタンを何度かポチポチしてもらえれば
数値に応じて色が変わるのがわかると思います。
構文
<div v-bind:class="{'クラス名':真偽値}"></div>
省略形
<div :class="{'クラス名':真偽値}"></div>v-bindを理解できてえらい！
まとめ
-
<div v-bind:class=”変数”></div>
- ↑Vue.jsで任意のクラス名を付与する方法
-
<div v-bind:class=”{‘クラス名’:真偽値}”></div>
- ↑真偽値に応じてクラス名を付与するかを判定する方法
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
