Vue--绑定class样式

有三种方式：

1、字符串写法(freeA)
适用于：样式的类名不确定，需要动态指定
2、数组写法(freeB)
适用于：要绑定的样式个数不确定，名字也不确定
3、对象写法(freeC)
适用于：要绑定的样式个数确定，名字确定，但是要动态决定是否
对象写法简写

<button style="width: 5rem;height: 3rem;"  :class="{样式名：true|false}}" @click="test"></button>
如
<button style="width: 5rem;height: 3rem;"  :class="{greeC:freeCC}" @click="test"></button>

demo如下

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>.redC{background-color: red;}.greeC{background-color: gray;}.pinC{background-color: pink;}</style><div id="app">{{ message }}
<button style="width: 5rem;height: 3rem;"  :class="freeA" @click="test"></button>
<button style="width: 5rem;height: 3rem;"  :class="freeB" @click="test"></button>
<button style="width: 5rem;height: 3rem;"  :class="freeC" @click="test"></button>
</div>
<script>
//  vue2
let vm=new Vue({el: '#app',data: {message:'阿萨德',x:'',y:'',z:{za:1},freeB:['redC','greeC'],freeA:'redC',freeC:{pinC:true}},methods:{},})</script>