vue学习201003：vue中的样式

class：

.red{
    color:red;
}
.thin{
    font-weight:200;
}
.active{
    letter-spacing:0.5em;
}

1. 直接传递一个数组。注意：这里的class要用v-bind绑定

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

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

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

3. 使用对象来代替三元表达式

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

4. 直接使用对象进行表达
   注意：class使用v-bind绑定对象时，对象的属性是类名，可带引号也可以不带；属性的值是一个 标识符

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

内联样式 style：

<!-- 对象就是无序键值对的集合 -->
<h1 :style="{ color:'red' , 'font-weight': 200}"></h1>

或者可以把对象移到 data 里定义

两个以上对象可以使用数组

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

data:{
    styleObj1:{ color:'red' , 'font-weight': 200},
    styleObj2:{ 'font-style': 'italic'}
}