SOURCE

new Vue({
  el: '#app',
  methods: {
    startEffect: function() {
      // setInterval
    }
  }
})

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

<div id="exercise">
  <!-- 1) 用按钮启动效果。效果应该在每个新的setInterval函数来交替使用“hightlight”或“shrink”类(setInterval每个自己设定的时间就会执行一次) -->
  <div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect"></div>
  </div>
  <!-- 2) 创建几个css类并通过数组语法附加他们，并且使用数组来添加到div上 -->
  <div>I got no class :(</div>
  <!-- 3) 让用户输入一个类(创建一些示例类)并附加 -->
  <div>
    <input type="text">
    <div></div>
  </div>
  <!-- 4) 让用户输入一个类，并为另一个类输入true/false(创建一些类)，然后附加这些类 -->
  <div>
    <input type="text">
    <input type="text">
    <div></div>
  </div>
  <!-- 5) 重值前面的一些功能，不过使用样式的值代替类名，用户仍然可以再这里输入内容 -->
  <div>
    <input type="text">
    <div></div>
  </div>
  <!-- 6) 创建一个简单的进度条，利用setInterval每半秒触发一次.通过样式绑定增加进度条的宽度 -->
  <div>
    <button>Start Progress</button>
    <div></div>
  </div>
</div> 

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.highlight{
  background-color: red;
  width: 200px;
}
.shrink{
  background-color: gray;
  width: 50px
}
.blue{
  background-color: blue;
}