toggle class active

by willystyle

HTML

<div id="app"></div>

<script type="text/x-template" id="test-template">
    <div :class="{'active':isActive}" @click="toggleClassActive">Test toggle class Active</div>
</script>

CSS

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  color: black;
  background-color: grey;
}
.active {
  color: white;
  background-color: red;
}

JavaScript

var vueInstance = new Vue({
    el: '#app',
    template: '#test-template',
    data: {            
      isActive: false
    },
    mounted: function () {},
    computed: {},
    methods: {
    	toggleClassActive () {        
      	this.isActive = !this.isActive;
      }
    }
});