JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
 <!-- 动态切换是否赋予class属性 --> 
  <div class ="static" :class = "{ 'active': isActive, 'error': isError }">
    这是一段div里的文字
  </div>
</div>

CSS

.active {
  width: 300px;
  height: 200px;
  background: #333;
}

.error {
  text-decoration: line-through;
}

.static {
  color: red;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	isActive: true,
    isError: true
  }
})