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'}
]
}