<div id="app">
<div class="p-5">
<button class="btn" :class="arrayClass">請操作本元件</button>
<!-- 陣列物件可以混用 -->
<button class="btn ms-1" :class="arrayClass,'text-danger',{'btn-sm':true}">請操作本元件</button>
<div class="mt-2">
<button type="button"
class="btn btn-outline-primary me-2"
v-on:click="addClass(['btn-primary','disabled'])">為陣列加入 Class</button>
<button type="button"
class="btn btn-outline-primary"
v-on:click="clearClass()">清空陣列內的 Class</button>
</div>
</div>
</div>
const App = {
data() {
return {
arrayClass: [''],
};
},
methods: {
addClass(arr) {
this.arrayClass.push(...arr);
},
clearClass(){
this.arrayClass.length=0;
}
}
};
Vue.createApp(App).mount('#app');
