Vue Styling 2

by nevkatz

HTML

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

<div id="app">
   <div class="demo" @click="attachRed = !attachRed" :class="divClasses"></div>
   <div class="demo" :class="{red: attachRed}"></div>
   <div class="demo"></div>
</div>

CSS

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

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

JavaScript

new Vue({
   el:'#app',
   data:{
     attachRed:false
   },
   computed:{
     divClasses:function(){
        return {
           red:this.attachRed,
           blue:!this.attachRed
        }
     }
   }
})