JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

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

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

<div id="app2">
  <div 
  class="demo" 
  @click="attachRed = !attachRed"
  :class="{red: attachRed, blue: !attachRed}"></div>
  <div class="demo" :class="{red: attachRed}"></div>
</div>

<div id="app3">
  <div 
  class="demo" 
  @click="attachRed = !attachRed"
  :class="divClasses"></div>
  <div class="demo" :class="{red: attachRed}"></div>
  <div class="demo" :class="color"></div>
  <div class="demo" :class="[color, {red: attachRed}]"></div>
  <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;
}

#app {
  border: 3px solid pink;
}

JavaScript

new Vue({
el: '#app',　
data: {
	attachRed: false
},
methods: {

}
});

new Vue({
el: '#app2',　
data: {
	attachRed: false
},
methods: {

}
});

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

}
});