如何在vue中使用样式

1.数组

<h1 :class="['red','thin']">这是一个H<h1>

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

<h1 :class="['red','thin'，isactive?'active':'']">这是一个H<h1>

3.数组中嵌套对象

<h1 :class="['red','thin',{'active':isactive}]">这是一个H<h1>

4.直接使用对象

<h1 :class="{red:true,italic:true,active:true,thin:true}">这是一个H<h1>

5.使用内联样式

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

<h1 :style="{'red','thin','font-size':'40px'}">这是一个H<h1>

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

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

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

<h1:style='h1styleObj'>这是一个h1<.h1>

3.在：style中通过数组，引用多个data上的样式对象
在data上定义样式：【属性上带有-，不能省略’'号，例如font-size】

data:{
  		h1styleObj:{color:'red','font-size':'40px','font-weight':'200'},
  		h1styleObj2:{fontstyle:'italic'}
  }

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

<h1 :style="[h1styleObj,h1styleObj2]">这是一个H<h1>