### **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> ~~~