Vue样式

使用Class样式

第一种方式：直接传递一个数组，注意：这里的class需要使用v-bind做绑定

<h1 :class="['thin','red','active']">这是一个大H1</h1>

第二种方式：在数组中使用三元表达式

<h1 :class="['thin','red',isactive?'active':'']">这是一个大H1</h1>
-------------------------------------
data:{   isactive:true }

第三种方式：在数组中使用对象代替三元表达式

<h1 :class="['thin','red',{'active':isactive}]">这是一个大H1</h1>
-------------------------------------
data:{   isactive:true }

第四种方式：直接使用对象，类似json

<h1 :class="{thin:true,red:true,active:true}">这是一个大H4</h1>

可以单独把class封装成对象classobject再调用，如：

<h1 :class="classobject">这是一个大H1</h1>
-------------------------------------
data:{   
     classobject:{thin:true,red:true,active:true} 
}

 

使用style样式

1.直接在元素上书写:style样式

<h1 :style="{'color':'red','font-weight':'300'}">这是一个大H1</h1>    

2.将样式样式封装成对象放到data中，在元素里调用

<h1 :style="styleobject">这是一个大H1</h1>  
data:{
         styleobject:{'color':'red','font-weight':'300'}
}

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

<h1 :style="[styleobject1,styleobject2]">这是一个大H1</h1>   
data:{
         styleobject1:{'color':'red','font-weight':'300'}，
         styleobject2:{'font-style':'italic'}
}