JSFiddle - React, Tailwind, and code Playground

by furiblog

HTML

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

<div id="app">
  <p :class="textClass">Hello World!</p>
  <button @click="activeFlg = !activeFlg">ボタン</button>
</div>

CSS

.text-color {
  color: red;
}

.bg-color {
  background-color: green;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    activeFlg: true
  },
  computed: {
    textClass() {
      return { 
        'text-color': this.activeFlg,
        'bg-color': !this.activeFlg
      };
    }
  }
});