【学习笔记】10-v-bind动态绑定Style（对象语法）

v-bind动态绑定style的对象语法

改变某个页面时，需要根据不同页面，改变不同的背景颜色或者字体大小，会偶尔用到

示例

<div id="app">
	<h1 :style="{fontSize : finalSize + 'px'}">{{message}}</h1>
	<h1 :style="getStyle()">{{message}}</h1>
</div>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			message:'你好',
			finalSize: 100,
		},
		methods:{
			getStyle:function(){
				return {fontSize : this.finalSize + 'px'}
			}
		}
	})
</script>

显示结果

注意：

1，属性的驼峰样式写法，可以省略减号，如果不想省略，需要自行添加引号
2，自身变量的调用this