vue js

by Rushan Sakhibgareev

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

CSS

.demo {
  width: 100px;
  height: 100px;
  background-color: gray;
  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
        }
     }
  }
});