今回はvue.jsのv-bindディレクティブでよく使用するv-bind:classを真偽値など使ってクラスを追加する方法を紹介していくぞ。真偽値でクラスを追加する方法まずv-bind:classの基本的なやり方だ。今回は炎系魔法のメラを例えに使って説明していく。最初はメラ系魔法かどうか(isMeraがtureかfalse)でクラスを追加するかどうかを決めるコードだ。FFでいうとファイヤ、ファイラ、ファイガになるな。次は複数のクラスをv-bindする方法だ。例としてメラ系魔法の中位魔法メラミを元に説明してみたぞ。今回使用したメラミはメラ系の中位魔法なので、isMeramiがtrueであれば、クラスにはredとmediumを追加していくことになる。}">isMeramiがtrueなら.メラミの呪文が書いてるテキストは赤文字になって更に文字サイズもミディアムになるぞ。次はv-bindで真偽値で同時に複数のクラスを追加するケースだ。このケースはメラ系上位魔法のメラゾーマで説明してやろう。下のコード例ではメラ系かどうかを判別するisMeraがtrueの場合、.redのクラスが追加される。次にisLargeがtrueの場合、.largeのクラスが追加される。上の例ではisMeramiがtrueかどうかだけを条件にしていたが、今回のコード例では2つの真偽値を使ってクラスを出し分けている。今回はisLargeはfalseになっているので「メラ系ではあるが、最上級ではない」という結果になる。}">これはメラゾーマではない。最後に三項演算子でクラスをv-bindする方法だ。これは追加するか否かではなく、どちらのクラスを追加するのか?という時に使えるぞ。下の例ではisMeraがtrueの場合.redクラスを追加、falseの場合.blueクラスを追加するようになっている。color:blue;}</style>まとめ今回はvueでclassをv-bindすることで、クラスを動的に追加する方法を紹介したぞ。アクティブなら表示されるこういった使い方はvueの実務ではよく見る手法なので、覚えておいて損はないはずだ。ちなみにこのサイトはドラクエを知らないと少し理解するのが難しいかもしれないな。魔王という概念を理解したかったら、まずはドラクエを学ぶことから初めてもいいだろう。火炎系魔法はメラ→メラミ→メラゾーマの順に強くなっていくぞ。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。excerptHiddenHiddenClose。