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>