在VUE中使用样式

使用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>