使用class样式
1.数组
<h1 :class="{'red','thin'}">123</h1>
2.数组中使用三元表达式
<h1 :class="{'red','thin',isactive?axtive':'}">123</h1>
3.数组中嵌套对象
<h1 :class="{'red','thin',{'active':isactive}}">123</h1>
4.直接使用对象
<h1 :class="{color:'red','front-size':'40px'}">123</h1>
使用内联样式
1.直接在元素上通过:style的形式书写样式对象
<h1 :style="{color:'red','front-size':'40px'}">123</h1>
2.将样式的对象定义到data中并直接引用到:style中
在data中定义样式
data:{
styleh1:{color:'red'},
styleh2:{color:'blue'}
}
在元素中通过属性绑定的形式将样式对象应用到元素中
<h1 :style="h1style">123</h1>
3.在:style中通过数组,引用多个data上的样式对象
在data上定义形式
data:{
styleh1:{color:'red'},
styleh2:{color:'blue'}
}
在元素中通过属性绑定的形式将样式对象应用到元素中
<h1 :style="[h1style,h2style]">123</h1>