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://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attacheRed"
:class="{red:attachRed}"> </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;
}