有三种方式：
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>
)
