CSSとの連動（bindingで色を変化させる）

【１】

.red {
  color: red;
}

.bg-blue{
  background-color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 class="red bg-blue">HELLO<h1>

【２】Viewでtrue or falseで表現

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 v-bind:class="{red: true 'bg-blue': false}">HELLO<h1>

もしくは

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :class="{red: true 'bg-blue': false}">HELLO<h1>

＊cssは変わらず
*bg-blueのハイフンを使ったケバブケースについてはシングルコーテーションで囲う

【３】Vueインスタンス内で表現

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :class="{red: isActive, 'bg-blue': !isActive}">HELLO<h1>

!isActiveは否定＝falseになる

  new Vue({
    el: '#app',
    data: {
  isActive: true    
      }
  })

（４）ボタンで逆にする

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :class="{red: isActive, 'bg-blue': !isActive}">HELLO<h1>
<button @click="isActive=!isActive">切り替え</button>

(5)computedを使用して書く

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :class="classObject">HELLO<h1>
<button @click="isActive=!isActive">切り替え</button>

  new Vue({
    el: '#app',
    data: {
  isActive: true    
      },
      computed: {
         classObject: function() {
            return {
            red: this.isActive,
            'bg-blue': !this.isActive
            }
         }
      }
  })

computedからdata{ },にアクセスする際は、isActiveにthis.をつける。

(6)配列を使用して書く

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :class="[color, bg]">HELLO<h1>

  new Vue({
    el: '#app',
    data: {
      color: 'red',
      bg: 'bg-blue'
      }
  })

(7)styleを使ってかく

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :style="{color: textColor, 'background-color': bgColor}">HELLO<h1>

new Vue({
   el: '#app',
    data: {
     textColor: 'red',
      bgColor: 'blue'
     }
})

(8)Vueインスタンス内にstyleを書く

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<h1 :style="styleObject">HELLO<h1>

  new Vue({
    el: '#app',
    data: {
      styleObject: {
        color: 'red',
        'background-color': 'blue'
        }
      }
  })