JSFiddle - React, Tailwind, and code Playground

by smax

HTML

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

<div id="app">
  <div id="div1" :class="{red: switched, green: !switched, 'blue-border': true}"></div>
  <div id="div2" :class="div2Classes"></div>
  <button @click="toggleClasses">Toggle Classes</button>
  <p :class="[color, {'blue-border': switched}]">Colored {{ color }}</p>
  <input type="text" v-model="color">
</div>

CSS

#div1, #div2 {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue-border {
  border: 2px solid blue;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	switched: true,
    color: 'red',
    border: 'blue-border'
  },
  computed: {
  	div2Classes: function() {
    	return {
      	green: this.switched,
        red: !this.switched,
        'blue-border': true
      };
    }
  },
  methods: {
  	toggleClasses: function() {
    	this.switched = !this.switched;
    }
  }
});