Vue :class属性・:style属性

では今回はHTMLのclass属性にv-bindをつけた時の動きについてみていきます。

<template>タグ内のHTMLに普通にclassを付けてstyleを当てるとこうなります。

<template>
  <div class="pink bg-green">Nyan</div>
</template>

<style>
.pink {
  color: pink;
}
.bg-green {
  background-color: green;
}
</style>

classを二つ当てて両方適応させてます。
これをv-bindでclassを当てます。

<template>
  <div :class="'pink bg-green'">Nyan</div>
</template>

:class="'pink bg-green'"このスペースで区切った文字列のデータはJavascriptからは扱いにくいのです。
例えばpinkだけを適用させたくないとすると、この文字列からpinkという文字を抜き出さないといけませんが、そういう処理は複雑で大変です。

ですがVueではclass属性に文字列以外で指定する方法もあります。
それはオブジェクトでclassのキーを書き、値にそのclassを適用させたいかどうかをtrue,falseで書きます。
JavaScriptではbg-greenのようなハイフンで繋いでいるものはクォーテーション''で囲む必要があります。

<template>
  <div :class="{pink: true, 'bg-green':true}">Nyan</div>
</template>

このようにするとclassが二つ適用されます。
もちろん、trueをfalseにすると適用されません。

<template>
  <div :class="{ pink: true, 'bg-green': false }">Nyan</div>
</template>

Vueではclassの属性値としてこのようにオブジェクトでJavaScriptから操作しやすいように指定することができます。
その仕組みとしてそれぞれのclassを適用させるかどうかをtrueかfalseで切り替えられるような仕組みをしています。
この仕組みはJavaScriptから扱いやすくなっていて、例えば下記のようにボタンを作ります。

<script setup>
import { ref } from 'vue'
const isPink = ref(true)
const isBgGreen = ref(true)
function toggleClass() {
  isPink.value = !isPink.value
  isBgGreen.value = !isBgGreen.value
}
</script>

<template>
  <div :class="{ pink: isPink, 'bg-green': isBgGreen }">Nyan</div>
  <button @click="toggleClass">Toggle</button>
</template>

<style>
.pink {
  color: pink;
}
.bg-green {
  background-color: green;
}
</style>

このようなボタン切り替えがclassで簡単に作ることができます。
こういうON,OFFではなく直接classの名前を動的に指定する方法もあり、その場合は配列を使います。

const className = ref('pink')
 <div :class="[className]">Nyan</div>

定数にref()でclassの名前を付けて:classに配列の[]で定数を渡すと指定したのと同じになり、もちろん配列なので複数指定もできます。

<template>
  <div :class="[className, 'bg-green']">Nyan</div>
  <button @click="toggleClass">Toggle</button>
</template>

こうするとbg-greenとpink両方が適応されるということですね。
classNameを動的に変更することも可能です。

const className = ref('pink')
function toggleClass() {
  isPink.value = !isPink.value
  isBgGreen.value = !isBgGreen.value
  className.value = 'bg-green'
}
<template>
  <div :class="[className]">Nyan</div>
  <button @click="toggleClass">Toggle</button>
</template>

Toggleボタンを押すと

このように切り替わります。
そして、この配列の中に先ほどのオブジェクトの指定の仕方を書くこともでき、true,falseでの切り替えも可能です。

 <div :class="[className, { 'bg-green': true }]">Nyan</div>

で、これも先ほどのisBgGreenを入れることもできて、ボタンを押すとisBgGreenがfalseになり、切り替えができます。

<script setup>
import { ref } from 'vue'
const isPink = ref(true)
const isBgGreen = ref(true)
const className = ref('pink')
function toggleClass() {
  isPink.value = !isPink.value
  isBgGreen.value = !isBgGreen.value
}
</script>

<template>
  <div :class="[className, { 'bg-green': isBgGreen }]">Nyan</div>
  <button @click="toggleClass">Toggle</button>
</template>

なので配列とオブジェクト両方同時に適用させることもできます。

そしてもう一つ、静的なclassも同時につけることができますが、最終的に２つのclassの値が合体したものが実際の値になるようになっています。
なので:classを付けて動的に表現したいけれど、同時に静的なclass（固定させたい時）も作りたい場合は別々に書くことができます。

<div class="border" :class="[className, { 'bg-green': isBgGreen }]">Nyan</div>

<style>
.pink {
  color: pink;
}
.bg-green {
  background-color: green;
}
.border {
  border: 2px dotted black;
}
</style>

このように静的にborderを付けて動的にclassを付けて操作することもできます。

では次はstyle属性について解説します。
style属性も下記のような書き方の:や;を書かないといけなかったり複雑な値を取ります。:styleの時もこのような文字列で使用することができますが、

<template>
  <div :style="'color: pink; background-color: green'">Nyan</div>
</template>

これもJavaScriptでは扱いにくくなってしまうのでVueではclassと同じようにオブジェクトで指定します。
ただ、keyとvalueはclassの設定方法とは違ってCSSのプロパティ名と値をkeyとvalueで取ります。

 <div :style="{color: 'pink', 'background-color': 'green'}">Nyan</div>

こんな感じですね。
ちなみに'background-color'こういう書き方はキャメルケースの方が書きやすいです。(''で囲まなくていいので)
Vueではキャメルケースが推奨されています。

 <div :style="{color: 'pink', backgroundColor: 'green'}">Nyan</div>

もちろんstyle属性に関しても静的な普通のstyle属性と共存して書くことができます。

 <div style="" :style="{color: 'pink', backgroundColor: 'green'}">Nyan</div>

では次回からは条件付きレンダリング、リストレンダリングを解説していきます。