Vue-v-bind:style

v-bind:style

<div id="app">

<div style="width:100px;height:50px;" v-bind:style="{'backgroundColor':'blue'}"></div>

<div style="width:100px;height:50px;" v-bind:style="{backgroundColor:'green'}"></div>

<div style="width:100px;height:50px;" v-bind:style="{backgroundColor:color}"></div>

color<input type="text" v-model.lazy:value="color">

<div v-bind:style="style">style</div>

<div v-bind:style="style1">style1 in computed</div>

</div>

<script>

var vm = new Vue({

el: "#app",

data: { color:"blue",style: { backgroundColor:'red' }}

,computed:{style1:function(){return {backgroundColor:this.color}}}

}

);

</script>

<div v-bind:style="[style2,style1,style3]">multi styles in computed</div>

computed:{

style1:function(){return {backgroundColor:this.color}},

style2:function(){return {"width":"100px","border-radius":"10px"}}, style3:function(){return {"margin":"10px 100px"}}

}