console
new Vue({
el:"#app",
data:{
isCircle:false,
color:"orange",
width:200,
height:100
},
computed:{
divClass: function(){
return{
circle:this.isCircle,
red:this.isCircle
}
},
divStyle:function(){
return{
backgroundColor:this.color,
width:this.width+"px",
height:this.height+"px"
}
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div class="shape" :style="divStyle"></div><br>
<input type="text" v-model="color"><br>
<input type="text" v-model="width"><br>
<input type="text" v-model="height">
</div>
.shape{
height:100px;
width:100px;
background-color:pink;
display:inline-block;
margin:10px;
}
.circle{
border-radius:50%;
}
.red{
background-color:red;
}
.orange{
background-color:orange;
}