SOURCE

new Vue({
  el: '#app',
  data: {
    borderRadius: '0%',
    isRed: true
  },
  methods: {
    start: function() {
      var vm = this;
      setInterval(function() {
        vm.isRed = !vm.isRed;
      },
      1000)
    },
    changeShape: function() {
      if (this.borderRadius == '0%') {
        this.borderRadius = '50%';
      } else {
        this.borderRadius = '0%';
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<!--第一个需求，用style的方式让我们的div方块和圆切换-->
<!--第二个需求 点击开始方块每隔一秒红蓝切换-->
<div id="app">
  <div class="shape" @click="changeShape()" :style="{'border-radius':borderRadius}">
  </div>
  <button @click="start">
    开始
  </button>
  <div class="shape" :class="{red:isRed,blue:!isRed}">
  </div>
</div>

.shape {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: orange;
  display: inline-block;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}