Vue

by joplomacedo

HTML

<div id="app">
  <div class="test"
  :class="{
  	blue: blueColor
  }"
  @click="blueColor = !blueColor">
  </div>
</div>

CSS

.test {
	width: 100px;
	height: 100px;
	background-color: gray;
}

.blue{
	background-color: blue;
}

Vue

new Vue({
  el: '#app',
  data: {
		blueColor: true,
		effectClasses: {
			highlight: false,
			shrink: true,			
		}		
  },
  methods: {
    startEffect: function() {
    	setInterval(function(){
						this.effectClasses.highlight = !this.effectClasses.highlight; 
            this.effectClasses.shrink = !this.effectClasses.shrink;    
            }.bind(this), 2000)
    }
  }
});