JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app">
  <div class="static" v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
    div
  </div>
</div>

CSS

.static {
  width: 100px;
  height: 100px;
}

.active {
  border: 1px solid #000;
}

.text-danger {
  color: red;
}

JavaScript

var vm = new Vue({
	el: '#app',
	data: {
    isActive: false,
    hasError: true
  }
});

//移除註解
//vm.$data.isActive = true;
//vm.$data.hasError = false;