vue里的样式添加之行间样式

一:行间样式 :和绑定其他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>
上一篇:Afinal载入网络图片及下载文件用法


下一篇:TCP系列41—拥塞控制—4、Linux中的慢启动和拥塞避免(一)