[Vue]特定のCSSクラスのスタイルを動的に修正する方法

Question

聞きたいこと

Vueを使用してWebアプリ開発をしています。
下のようにコンポーネントを作成しているのですが、propsの値によって特定のCSSクラスにスタイルを動的に割り当てたいと思っています。

<template>
  <p class="text">Hello</p>
</template>

:

<script>
props: {
  color: {
     type: String,
     default: 'red'.
  }
}
:
</script>

<style>
.text {
  color: 'red';  // もしprops.colorがblueだった場合、このredをblueにしたい
}
</style>

注意

v-bind:styleを使用してCSSクラスのcolorを直接変更しなくてもcolorは変更できそうですが、できれば既存で定義されたCSSクラスの値を動的に変更したいです。

Answer 1

現在公開されているVue.js（2.x系）では、styleブロックに定義されたCSSスタイルの値を（コンポーネントのdataやpropsに基づいて）動的に変更することはできません。

要素のstyle属性を直接操作したくない場合、styleごとにCSSクラスを用意し、動的にclass属性を切り替えることで対応できます（一般的な方法です）。

<template>
  <div :class="colorClass">Hello</div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'red'
    }
  },
  computed: {
    colorClass () {
      switch (this.color) {
        case 'red':
          return 'red-class'
        case 'blue':
          return 'blue-class'
      }
    }
  }
}
</script>

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

:class=""は動的にCSSクラスを設定するためのものですが、Vue.jsでは、静的なCSSクラスと併用もできます。

<template>
  <div :class="colorClass" class="static-class">Hello</div>
</template>

その他、詳しい解説は公式サイトの該当部分を確認されるといいと思います。

---

ちなみに、８月にリリース予定のVue.js 3では、sabxさんが提示しているやり方に近いものが実現できるようになるかもしれません（Targetの部分をみると、Vue.js 2.x系にも逆輸入される可能性があります）。

参考資料