一：行间样式 ：和绑定其他dom的属性一样， v-bind:style=
<div v-bind:style={backgroundColor:color}>2</div> //color是data或者computed的k；
<div v-bind:style='style1'>1<div> //整个style1是data的k或者computed的k
<div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div>； //style的值是数组，里面的值是data或computed的k
div {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:style='style1'>1<div>
<div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div>
<div v-bind:style='demostyle'></div>
<button v-on:click='changeColor'>click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: 'red',
style2: {
fontSize: '30px',
fontWeight: 'bolder'
}
},
computed: {//利用computed来获得，这厉害了，不但可以获取到值（computed的k和data里的k用法一样），
//而且节省了性能,一旦相关值变化，computed里的k会重新计算返回新的值
style1: function () {
return {
height: '100px',
width: '100px',
backgroundColor: this.color //这一句如果在data里是获取不到this.color的
}
}
},
methods: {
changeColor: function () {
this.color = this.color == 'red' ? 'yellow' : 'red';
}
}
})
</script>