<div id="app">
<div class="p-5">
<!-- 物件方式綁定樣式 -->
<div class="box" :class="{rotate:true,'bg-primary':true}"></div>
<!-- 利用data內的變數動態更新樣式 -->
<div class="box mt-5" :class="{rotate:isTransform,'bg-primary':boxColor}"></div>
<div class="mt-5">
<button class="btn btn-outline-primary" v-on:click="change('isTransform')">選轉物件</button>
<button class="btn btn-outline-primary ms-1" v-on:click="change('boxColor')">切換色彩</button>
</div>
<hr>
<!-- 直接帶入物件 -->
<div class="box mt-5" :class="objectClass"></div>
</div>
</div>
const App = {
data() {
return {
isTransform: true,
boxColor: false,
objectClass:{
rotate:true,
'bg-danger':true
},
};
},
methods: {
change: function (key) {
this[key] = !this[key];
},
}
};
Vue.createApp(App).mount('#app');
