（四）Vue - 在Vue中使用样式

使用class样式

普通的使用class样式：

<h1 class="red thin">我是h1标签！！！</h1>

1. 直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
   数组中使用引号代表class样式名，不带引号则为变量名

<h1 :class="['red', 'thin']">我是h1标签！！！</h1>

2. 在数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">我是h1标签！！！</h1>

3. 在数组中使用 对象来代替三元表达式，提高代码的可读性
   对象的属性值为true则属性生效为class名，否则不生效

<h1 :class="['red', 'thin', {'active': isactive}]">我是h1标签！！！</h1>

4. 可直接使用对象
   在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，这里不写引号作为例子； 属性的值 是一个标识符

<h1 :class="{red:true, italic:true, active:true, thin:true}">我是h1标签！！！/h1>

使用内联样式

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>