class を動的に変化させて、適用されるスタイルを動的に変化させよう

参考コード

  • : をつけることで属性の値として Reactive な変数を参照できる
  • 今回は computed プロパティで定義された numberClass を、クラス属性の値として参照した
  • numberClass は this.number を元に条件分岐して "red" or "blue" を返す
  • red と blue それぞれのスタイルを CSS で定義する
App.vue
<template>
  <div id="app">
    <h2 :class="numberClass">{{ number }} {{ double }}</h2>
    <button @click="add(1);">+1</button> <button @click="add(10);">+10</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  computed: {
    double() {
      return this.number * 2;
    },
    numberClass() {
      if (this.number > 50) {
        return "red";
      }

      return "blue";
    }
  },
  methods: {
    add(val) {
      this.number = this.number + val;
    }
  }
};
</script>