使用内联样式
1. 直接在元素上通过 `:style` 的形式，书写样式对象
```
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
```
<div class="box"> <!-- 内联样式书写为对象形式 其中font-size 必须加引号 注意：凡是有横线的都必须加引号 --> <h1 :style="{color:'red','font-size':'50px'}">这是一个善良的h1</h1> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ } }); </script>
2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中
+ 在data上定义样式：
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
```
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
```
3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象
+ 在data上定义样式：
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
```
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1
<body> <!-- <div class="box"> 内联样式书写为对象形式 其中font-size 必须加引号 注意：凡是有横线的都必须加引号 --> <!-- <h1 :style="{color:'red','font-size':'50px'}">这是一个善良的h1</h1> --> <!-- </div> --> <div class="box"> <!-- 使用对象形式添加内联样式 --> <h1 :style="styleobj">这是一个善良的h1</h1> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ styleobj:{ color:'red', width:'500px', height:'500px' } } }); </script>
:style 数组的写法
<div class="box">
<p :style="stylearr">世界之窗，关注你我！</p>
<input @click="show()" type="button" value="提交">
</div>
<script src="vue-2.4.0.js"></script>
<script>
new Vue({
el:'.box',
data:{
Iscolor:true,
colorobj:{
red:true,
green:true
},
//有键值对的需要使用对象数组
stylearr:[
{background:'red'}
]
}
