vue.jsでv-bind:classを使ってclassを追加または変更するには

v-bind:classを使用してclassを動的に追加する方法

今回はvue.jsのv-bindディレクティブでよく使用するv-bind:classを真偽値など使ってクラスを追加する方法を紹介していくぞ。

真偽値でクラスを追加する方法

まずv-bind:classの基本的なやり方だ。今回は炎系魔法のメラを例えに使って説明していく。最初はメラ系魔法かどうか（isMeraがtureかfalse）でクラスを追加するかどうかを決めるコードだ。FFでいうとファイヤ、ファイラ、ファイガになるな。

<p :class="{'red' : isMera }">
isMeraがtrueなら.redがつくから
メラ系の呪文が書いてるテキストは赤文字になるぞ
</p>

<script>
 data(){
  isMera:true,
 }
</script>

<style>
 .red{
  color:red;
 }
</style>

真偽値で複数のクラスを追加する方法

次は複数のクラスをv-bindする方法だ。例としてメラ系魔法の中位魔法メラミを元に説明してみたぞ。今回使用したメラミはメラ系の中位魔法なので、isMeramiがtrueであれば、クラスにはredとmediumを追加していくことになる。

<p :class="{'red medium' : isMerami }">
isMeramiがtrueなら.メラミの呪文が書いてるテキストは
赤文字になって更に文字サイズもミディアムになるぞ。
</p>

<script>
 data(){
  isMerami:true,
 }
</script>

<style>
 .red{
  color:red;
 }
.medium{
 font-size:medium;
}
</style>

同時に複数の真偽値で異なるクラスを追加する方法

次はv-bindで真偽値で同時に複数のクラスを追加するケースだ。そうだな、このケースはメラ系上位魔法のメラゾーマで説明してやろう。

下のコード例ではメラ系かどうかを判別するisMeraがtrueの場合、.redのクラスが追加される。次にisLargeがtrueの場合、.largeのクラスが追加される。

上の例ではisMeramiがtrueかどうかだけを条件にしていたが、今回のコード例では2つの真偽値を使ってクラスを出し分けている。今回はisLargeはfalseになっているので「メラ系ではあるが、最上級ではない」という結果になる。

<p :class="{ 'red' : isMera , 'large' : isLarge }">
これはメラゾーマではない。 メラだ
</p>


<script>
 data(){
  isMera:true,
  isLarge:false,
 }
</script>

<style>
 .red{
  color:red;
 }
.large{
 font-size:large;
}
</style>

三項演算子で異なるクラスを追加する方法

最後に三項演算子でクラスをv-bindする方法だ。これは追加するか否かではなく、どちらのクラスを追加するのか？という時に使えるぞ。下の例ではisMeraがtrueの場合.redクラスを追加、falseの場合.blueクラスを追加するようになっている。

<p :class="{isMera?'red':'blue'}">気をつけろ！これはメラ系魔法じゃない！</p>

<script>
 data(){
  isMera:false,
 }
</script>

<style>
 .red{
  color:red;
 }
.blue{
 color:blue;
}
</style>

まとめ

今回はvueでclassをv-bindすることで、クラスを動的に追加する方法を紹介したぞ。

アクティブなら表示される

こういった使い方はvueの実務ではよく見る手法なので、覚えておいて損はないはずだ。

ちなみにこのサイトはドラクエを知らないと少し理解するのが難しいかもしれないな。
魔王という概念を理解したかったら、まずはドラクエを学ぶことから初めてもいいだろう。

火炎系魔法は
メラ→メラミ→メラゾーマ
の順に強くなっていくぞ。

覚えておくがよい！