vue学习201003：vue中的样式

class：

.red{ color:red; } .thin{ font-weight:200; } .active{ letter-spacing:0.5em; } 直接传递一个数组。注意：这里的class要用v-bind绑定 <h1 :class="['red','thin']"></h1> 在数组中使用三元表达式 <h1 :class="['red','thin', istrue?'active':'']"></h1> 使用对象来代替三元表达式 <h1 :class="['red','thin', {'active':istrue}]"></h1> 直接使用对象进行表达 注意：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'} }