一、 使用內聯樣式
1. 直接在元素上通過 `:style` 的形式，書寫樣式對象
<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>
2. 將樣式對象，定義到 `data` 中，並直接引用到 `:style` 中
（1） 在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
（2）在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：
<h1 :style="h1StyleObj">這是一個善良的H1</h1>
3. 在 `:style` 中通過數組，引用多個 `data` 上的樣式對象
（1）在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
（2） 在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>
二、實例
<body> <div id="app"> <!-- 對象就是無序鍵值對的集合 --> <h1 :style="styleObj1">這是一個h1</h1> <h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, methods: {} }); </script> </body>