JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <div class="demo" @click="attchRed = !attchRed"> </div>
  <div class="demo" :class="color"> </div>
  <div class="demo" :class="divClasses"> </div>
 
 
  <div class="demo2"> </div>
  <div class="demo2" :style="mybckColor"> </div>
  <div class="demo2" :style="{backgroundColor: colorStyle}"> </div>
 
  <hr>
  <p>
  {{attchRed}}
  </p>
  <input type="text" v-model="color"> 
 <input type="text" v-model="colorStyle"> 
</div>

CSS

.demo{
  float: left;
  width:100px;
  height:100px;
  margin:10px;
  background-color:grey;
}
.demo2{
  float: right;
  width:100px;
  height:100px;
  margin:10px;
  background-color:grey;
}

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

JavaScript

new Vue({
	el: '#app',
  	data: {
    	attchRed: false,
      color: 'green',
      colorStyle: 'black'
    },
    computed: {
    	divClasses: function(){
      	return {
        	red: this.attchRed,
          'blue': !this.attchRed
        }
      },
      mybckColor: function(){
      	return{
        	backgroundColor: this.colorStyle
        }
      }
    }
});