JSFiddle - React, Tailwind, and code Playground

by eagle sum

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="show">
    <!-- 陣列方式 -->
    <div :class="['red','size']">eagle</div>
    <!-- 物件方式 -->
    <div :class="{'red':a,'size':b}">eagle</div>
    <!-- 可使用三元判斷式 -->
    <div :class="[a?'size':'red']">eagle</div>
</div>

CSS

.red {color: red;}
.size {font-size: 30px;}

JavaScript

new Vue({
        el: '#show',
        data: {
            a: true,
            b: false
        }
    })