SOURCE

new Vue({
  el: '#exercise',
  data: {
    attachRed: false,
    color: 'gray',
    width: 100,`	`
    float: 'float',
    myStyle: '',
    classValue: '',
    flag: false,
    wid: 10,
    effectClasses:{
      highlight: false,
      shrink: true,
    },
    myStyle1:{
      width: '100px',
      height: '100px',
      backgroundColor: 'gray',
    }
  },
  methods: {
    // startEffect: function(){
    //   this.myStyle = 'highlight';
    //   var vm = this;
    //   setInterval(function(){
    //     vm.myStyle = vm.myStyle == 'highlight'? 'shrink':'highlight';
    //   },2000);
    //   //setTimeout在2s后结束，setInterval每2s执行一次
    // },
    startEffect: function(){
      var vm = this;
      setInterval(function(){
        vm.effectClasses.highlight = !vm.effectClasses.highlight;
        vm.effectClasses.shrink = !vm.effectClasses.shrink;
      },2000);
      //setTimeout在2s后结束，setInterval每2s执行一次
    },
    changeWid: function(){
      var vm = this;
      setInterval(function(){
        vm.wid += 10;
      },500);
    }
  }
});

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="exercise">
<div>
  <button @click="startEffect">Start Effect</button>
<!--   <div id="effect" :class="myStyle"></div>
   -->  <div id="effect" :class="effectClasses"></div>

  
  <div :class="[myStyle,float, 'text-color',  'high']">I got no class</div>
  <div>
    <input type="text" v-model="classValue"/>
    <div :class="[{visible:true},classValue]"></div>
  </div>

  <div>
     <input type="text" v-model="classValue"/>enter a class   <br />
<!--     非空字符串被转化为true -->
     <input type="text" v-on:keyup.enter="flag = $event.target.value"/> enter true or false
    <div :class="[classValue,{'class3':flag}]"></div>
  </div>
<!--   <div>
    <input type="text" v-model="color"/>
    <div class = "class1" :style="{ backgroundColor: color}"></div>
  </div> -->
    <div>
    <input type="text" v-model="myStyle1.backgroundColor"/>
    <div :style="{ backgroundColor: color}">第四个</div>
  </div>
  <div>
    <button @click="changeWid">start progress</button>
    <div class="pro"><div id="progress" :style="{width: wid + 'px'}"></div></div>
  </div>
</div>
</div>  

#effect{
  width:100px;
  height:100px;
  border:1px solid black;
}

.highlight{
  background-color:red;
  width: 200px !important;
}

.shrink{
  background-color: gray;
  width: 50px !important;
}
.float{
  float: right;
}
.text-color{
  color: purple;
}
.high{
  height:60px;
}
.visible{
    width:100px;
  height:100px;
}
.class1{
  width:100px;
  height:100px;
  background-color: gray;
}
.class2{
    width:50px;
  height:50px;
  background-color: green;
}
.class3{
    border:2px solid purple;
}
#progress{
  height:10px;
  border:1px solid #0100;
  background-color: green;
}
.pro{
  height:10px;
  width:300px;
  border:1px solid black;
}