SOURCE

new Vue({
  el: '#app',
  data: {
    attachRed: false, // 初始值为false,即不添加元素
    color: 'green' // 在输入框输入任意颜色，就会变成任意的颜色
  },
  computed: { // 使用计算属性来实现对多个颜色的控制
    divClasses: function(){
      return {
        red: this.attachRed,
        blue: !this.attachRed
      };
    }
  }
})

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

<div id="app">
  <div 
     class="demo" 
     @click="attachRed = !attachRed" 
     :class="divClasses"></div>
  <div class="demo" :class="{red: attachRed}"></div>
  <div class="demo" :class="[color,{red: attachRed}]"></div>
  <hr />
  <input type="text" v-model="color" />
  
</div>

.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}