<div id="app">
<div class="p-5">
<div class="box" :style="{backgroundColor:'red',border:'5px solid blue'}"></div>
<div class="box" :style="styleObject"></div>
<div class="box" :style="[styleOjbect,styleObject2]"></div>
</div>
</div>.box {
background-color: var(--bs-light);
border: 1px solid var(--bs-gray);
width: 80px;
height: 80px;
}
.box {
transition: all .5s;
}
.box.rotate {
transform: rotate(45deg)
}const App = {
data() {
return {
styleObject: {
backgroundColor: 'red',
borderWidth: '5px'
},
styleObject2: {
boxShadow: '8px 8px 10px rgba(0, 0, 0, 0.56)'
},
styleObject3: {
userSelect: 'none'
}
};
}
};
Vue.createApp(App).mount('#app');