### **1. 使用class樣式** **1. 數組** ~~~ <h1 :class="['red', 'thin']">這是一個邪惡的H1</h1> ~~~ **2. 數組中使用三元表達式** ~~~ <h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1> ~~~ 3. 數組中嵌套對象 ~~~ <h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1> ~~~ isactive 等于true或者false 4. 直接使用對象 ~~~ <h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1> ~~~ ### **2. 使用內聯樣式** 1. 直接在元素上通過 `:style` 的形式，書寫樣式對象 ~~~ <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1> ~~~ 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> ~~~