1.用法
style属性要用小驼峰法
:style="{fontSize:'50px',backgroundColor:'red'}"
举例:
属性值是个字符串'50px',不能动态改变
<div id="app">
<p :style="{fontSize:'50px'}">hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
finalSize : 50,
currentColor: 'red'
}
})
</script>
image.png
属性值换成data中的变量fontSize,可以动态改变
<div id="app">
<p :style="{fontSizefinalSize+'px'}">hello</p>
</div>
image.png
image.png
2.简化代码
style的行间用函数替换
<div id="app">
<p :style="getStyle()">hello</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el : '#app',
data : {
finalSize : 50,
currentColor: 'red'
},
methods : {
getStyle : function() {
return {fontSize:this.finalSize+'px'};
}
}
})
</script>
网友评论