JSFiddle - React, Tailwind, and code Playground

by Breno RdV

HTML

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

<div id="app">
  <div class="demo" 
       @click="attachRed = !attachRed"
       :class="{'red': attachRed}"></div>
  <div class="demo" :class="divClasses"></div>
  <div class="demo" :class="color"></div>
  <div class="demo" :class="[color, {'red': attachRed}]"></div>
  <hr>
  <input type="text" v-model="color">
</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

var v = new Vue({
	el: "#app",
  data: {
  	attachRed: false,
    color: 'green'
  },
  computed: {
  	divClasses: function() {
    	return {
      	'red': this.attachRed,
        'blue': !this.attachRed
      };
    }
  }
});