<div id="app">
<div class="wrap mt-5">
<div class="box mb-4" :class="styleObj">
</div>
<button class="btn btn-primary size" @click="styleObj.rotate=!styleObj.rotate">旋轉物件</button>
<div class="form-check mt-4">
<input type="checkbox" class="form-check-input" id="classToggle2" v-model="styleObj['background-red']">
<label class="form-check-label" for="classToggle2">切換色彩</label>
</div>
</div>
</div>
.wrap{
margin-left:auto;
margin-right:auto;
max-width: 300px;
display: flex;
flex-direction: column;
}
.box{
height: 100px;
width: 100px;
outline: 1px solid black;
transition: all .5s;
}
.size{
width: 100px;
}
.rotate{
transform: rotate(45deg);
}
.background-red{
background:red;
}
var app = new Vue({
el:'#app',
data:{
styleObj:{
'rotate':false,
'background-red':false
}
}
})
