Vue元素样式

用v-bind来进行属性绑定（简写:属性名），来实现对元素样式的修改
 

Vue中class样式

1.数组

<h1 :class="['red','thin']"></h1>

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

<h1 :class="['red','thin',isactive?'active':'']"></h1>

3.数组中嵌套对象

<h1 :class="['red','thin',{'active':isactive}]"></h1>

4.直接使用对象

<h1 :class="{red:true,italic:true,active:true,thin:true}"></h1>

2和3是同一种效果的不同表达方式
 

Vue中行内样式

1.直接通过v-bind绑定

<h1 :style="{color:'red'}"></h1>

2.样式定义在data直接引用到:style

data:{
    styleObj:{color:'red'}
}

<h1 :style="styleObj"></h1>

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

data:{
    styleObj1:{color:'red'},
    styleObj2:{color:'red'}
}

<h1 :style="[styleObj1,styleObj2]"></h1>