在Vue中使用样式

一、vue中通过属性绑定为元素设置class样式

<!--方式一：直接传递一个数组,class要用v-bind做数据绑定-->
<!--<h2 :class="['thin','italic']">{{ msg }}</h2>-->
						
<!--方式二:三元表达式-->
<!--<h2 :class="['red','italic',flag?'active':'']">{{ msg }}</h2>-->
			
<!--方式三：数组中嵌套对象,提高代码的可读性-->
<!--<h2 :class="['thin','italic',{active:flag}]">{{ msg }}</h2>-->
			
<!--方式四：在为 class 使用v-bind 绑定对象的时候，对象的属性是类名，
属性可以带或者不带引号都可以-->
<h2 :class="{thin:true,italic:false,active:true,red:true}">{{ msg }}</h2>

二、vue中通过属性绑定为元素绑定style行内样式
** 注意：对象中，属性的键值对中键的名字如果中间包含横线，这时候必须使用引号引起来：**

styleObj:{color: '#00FA9A','font-style': 'italic'}；
<!--方案一，直接在 :style 后面书写样式-->
<h1 style="color: #00FA9A;font-style: italic">我好大</h1>

<!--方案二，将对象样式定义到data中，直接在 :style 后面引用-->
<h1 :style="styleObj">我好大</h1>

<!--方案三，多种样式同时被引用时，将对象样式定义到data中，
直接在 :style 后面用数组引用-->
<h1 :style="[styleObj,styleObj2]">我好大</h1>