console
new Vue({
el: '#app',
data: {
attachRed: false,
color: 'gray',
width: 100,
},
computed:{
myStyle: function(){
return {
backgroundColor: this.color,
width: this.width +'px'
};
}
}
});
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<div class="demo" @click="attachRed = !attachRed" :class="{red:attachRed}"></div>
<div class="demo" :style="{backgroundColor:color}"></div>
<div class="demo" :style = "myStyle"></div>
<div class="demo" :style = "[myStyle,{height: width + 'px'}]"></div>
<hr>
<input type="text" v-model="color" />
<input type="text" v-model="width" />
</div>
.demo{
width:100px;
height:100px;
background-color:gray;
display:inline-block;
margin:10px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}