开发者学堂课程【Vue.js 入门与实战：veu 中通过属性绑定为元素绑定 style 行内样式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8138
veu 中通过属性绑定为元素绑定 style 行内样式
目录
一、 使用内联样式
二、 代码
一、使用内联样式：
1.直接在元素上通过( :style] 的形式，书写样式对象。
这是一个善良的H1
2.将样式对象，定义到 data 中，并直接引用到 :style 中
在 data 上定义样式：
data: {
h1StyleObj: { color: 'red' , 'font-size' : '40px ' , 'font-weight ' : '280’}
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中:
这是一个善良的H1
3.在 :style 中通过数组，引用多个 data 上的样式对
在 data 上定义样式:
data: {
h1styleObj: { color: 'red', 'font-size' : '40px ' , 'font-weight ': '280’},
h1styleObj2: { fontStyle: 'italic' }
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中:
这是一个善良的H1
二、代码：
<head>
<meta charset="UPr-8">
<meta name="viewport" content="width=device-width，I nitial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=" . /lib/vue-2.4.0.js"></script>
</head>
<body>
<div id=”app”>
<!--对象就是无序键值对的集合-->
<!--<h1 style=”styleObj1”>这是一个h1<h1>
</div>-->
<h1 style=”[ styleObj1, styleObj2 ]”>这是一个h1<h1>
</div>-->
<script>
//创建vue 实例，得到ViewMode1
var vm= new vue ({
el: ‘#app’,
data: {
styleObj1:{ color:’red’, ‘fond-weight’: 200},
styleObj2:{ ‘font-style’: ‘italic’ }
},
methods: {}
｝）；
</script>
</body>
输出结果：
