2019/06/29

【JS】Vueの:classの書き方3通り

こんにちは!今日はVueの動的クラス(:class)の書き方3通りについて紹介します。

静的なclass(通常のclass)

通常のclassを用いる方法は通常のhtml、cssと全く同じよ。こんな感じ

<div class='red'>
  りんご
</div>

.red{
  color: red;
}

動的なclass(dataによって値が変わるclass)を用いるにはv-bind:classを用います。こんな感じ

<div v-bind:class='"red"'>
  りんご
</div>

.red{
  color: red;
}

vueでは v-bind: を省略して : のみにできるのでこんな風に書けます。実際はこの書き方の方が多いっすねー

<div :class='"red"'>

あとv-bind系で文字列を使う場合はクォーテーションの中に更にクォーテーションが必要なので注意！これだとエラーになるよ。

<div :class='red'>

vueで:classを使う時は、dataの値によってclassを選択するような場面が多いんじゃないかなって思います。dataは↓のような書き方するやつ。

export default {
  data: () =>
    ({
      one: 1,
      two: 2,
      three: 3,
    })
}

dataが条件に合えばclassを付与、合わなければ何も付与しない書き方です。まあ一番使うかも。 data「one」の値が1ならclass「color--one」を付与するにはこんな感じ。

<div :class='{"color--one", one === 1}'>

:class='{"クラス名", 条件}' みたいな感じね。クラス名をクォートで囲むの忘れがちなので注意。

そのまんま。これが一番使わないかも。

data「one」の値が1ならclass「color--one」、じゃなければ「color--not-one」付与するにはこんな感じ。

<div :class='[one === 1 ? "color--one" : "color--not-one"]'>

条件とクラス名の順番に注意！ :class='[条件 ? "クラス名", "クラス名"]' みたいな感じね。

これめっちゃ使えるけど公式ドキュメントに載ってない。パフォーマンスが悪いのかな？ color--【dataの値】みたいなクラス名にするにはこう。

<div :class='`color--${data}`'>

特に3.はめっちゃ使えると思うので使ってみてくだされ。BEMとかと相性良さそうね！もちろん、1と3を混ぜるみたいな使い方もできるけどあんまりやると可読性悪くなるので注意。