vue中样式三元判断_vue中的样式

[TOC]

### **使用class样式**

#### 1.数组

`

这是一个很大很大的H1,大到你无法想象！！

`

> 直接传递一个数组，注意：这里的class需要使用 **v-bind**做数据绑定

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

`

这是一个很大很大的H1,大到你无法想象！！

`

* 在data上定义样式；

`data: {flag:true}`

#### 3.对象来代替三元表达式,增强代码可读性

`

这是一个很大很大的H1,大到你无法想象！！

`

#### 4.直接使用对象

`

这是一个很大很大的H1,大到你无法想象！！

`

> 简写，将它放进data里

```

这是一个很大很大的H1,大到你无法想象！！

data: {

classObj:{red:true,thin:true,italic:false,active:false}

}

```

*****

### **使用内联样式**

#### 1.直接在元素上通过`:style`的样式，书写样式对象

`

这是一个善良的H1

`

>[danger] 注意，只要带有-的都需要加单引号

#### 2.将样式对象，定义到`data`中，并直接引用到`:style`中

* 在data上定义样式；

```

data：{

h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}

}

```

* 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

```

这是一个善良的H1

```

#### 3.在`:style`中通过数组，引用多个`data`上的样式对象

* 在data上定义样式：

```

data:{

h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'},

h1StyleObj2:{fontStyle:'italic'}

}

```

* 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

`

这是一个善良的H1

`