SOURCE

new Vue({
  el: '#exercise',
  data: {
      effectClasses: {
          highlight: false,
          shrink: true
      },
      float: 'float',
      userClass: '',
      isVisible: true,
      myStyle: {
          width: '100px',
          height: '150px',
          backgroundColor: 'gray'
      },
      progressBar: {
          width: '0px',
          backgroundColor: 'red'
      },
      innerProgressBar: {
          width: '0px',
          height: '20px',
          backgroundColor: 'blue'
      }
  },
  methods: {
    startEffect: function() {
        var vm = this;
        setInterval(function() {
            vm.effectClasses.highlight = !vm.effectClasses.highlight;
            vm.effectClasses.shrink = !vm.effectClasses.shrink;
        },1000);
    },
    startProgress: function() {
        var vm = this;
        var width = 0;
        setInterval(function() {
            width = width + 10;
            vm.progressBar.width = width + 'px';
            vm.innerProgressBar.width = width + 'px';
        },500);
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="exercise">
  <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
  <div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="effectClasses"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div v-bind:class="[float, 'blue', 'text-color']">I got no class :(</div>
  <!-- 3) Let the user enter a class (create some example classes) and attach it -->
  <br>
  <div>
    <input type="text" v-model="userClass">
    <div :class="[{visible: true}, userClass]"></div>
  </div>
  <!-- 4) Let the user enter a class and enter true/ false for another class (create some example classes) and attach the classes -->
  <div>
    <input type="text" v-model="userClass">
    <input type="text" v-model="isVisible">
    <div :class="[{visible: isVisible}, userClass]"></div>
  </div>
  <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles.  -->
  <div>
    <input type="text" v-model="myStyle.backgroundColor">
    <div :style="myStyle"></div>
    <div style='{backgroundColor: blue, with: 100px}'></div>
  </div>
  <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
  <div>
    <button v-on:click="startProgress">Start Progress</button>
    <div :class="['progress-bar']" :style="progressBar"></div>
    <div :class="['progress-bar']">
        <div :style="innerProgressBar"></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;
}

.blue {
    background-color: blue;
}

.float {
    float: right;
}

.text-color {
    color: yellow;
}

.visible {
    width: 100px;
    height: 50px;
}

.progress-bar {
    width: 200px;
    height: 20px;
    border: 1px solid black;
}

.myClass2 {
    background-color: yellow;
    width: 150px;
    height: 150px;
}