在Vue.js 中，我們可以使用class 常用數組來簡化模板的代碼量和提高可讀性。class綁定提供了對類和內聯樣式的完全控制，讓我們可以輕松地根據組件的狀態更新樣式。
下面是一個示例。我們將使用一個簡單的Vue組件，并使用v-bind:class指令來更改其樣式。組件分為button1和button2，其樣式類取決于組件的isActive和hasError狀態。
Vue.component('example-component', {
prop: {
isActive: Boolean,
hasError: Boolean
},
template: '我是一個組件
在上面的示例中，我們通過將v-bind:class指令傳遞給一個對象來設置class屬性。每個鍵都是一個類名，每個值都是一個布爾值，用于確定樣式類是否應添加到元素上。如果isActive為真，則添加類名active，如果hasError為真，則添加類名error。
還可以傳遞數組：將數組作為v-bind:class的值時，它們將自動與空格分隔并應用于同一元素。這給了我們一個優雅的方法來動態插入多個類名。例如：
在上述示例中，我們傳遞一個包含兩個元素的數組。第一個元素是條件性的，僅在isActive為真時才添加我們定義的activeClass類名。第二個元素errorClass始終添加到元素上。結果是動態添加activeClass和errorClass類名。
總結一下，Vue的class 綁定語法支持字符串、對象和數組的使用，為vue開發者提供了更加靈活的綁定方式，可以實現不同情境下的樣式變化。