vue.js/クラスバインドまとめ

new Vue({
  el: "#app",
  data: {
    isActive: true,
    isGreenBackActive: true
  },
  methods: {
    changeGreen: function() {
        this.isGreenBackActive = !this.isGreenBackActive
    }
  }

})

<div id="app">
<p :class="{ red: isActive, blue: !isActive, 'green-back': isGreenBackActive }">テキスト</p>
<button @click="isActive = !isActive">押す</button>
<button @click="changeGreen">背景を緑にする</button>
</div>

.red{
  color: red;
}
.blue{
  color: blue;
}
.green-back{
  background: green;
}

オブジェクトにまとめることもできる

  computed: {
    classObject: function(){
        return {
      red: this.isActive,
      blue: !this.isActive,
      'green-back': this.isGreenBackActive
      }
    }
  },

<p :class="classObject">テキスト</p>