vue中class与style的绑定

绑定class

对象语法

单一

:class="{'类名' : isclass}"   

多个

  :class="{'类名1' : isclass1, '类名2' : isclass2}"

计算属性

:class="classes"  :class="计算属性名"
计算属性返回的是一个对象{}
classes : function () { 
	return {
	active : this . isActive && !this.error,
	’ text-fa 工 l ’: this.error && this . error . type === ’ fai l ’}

数组语法

:class="[classes1, classes2, classes]"  :class="[data对应的类名1,data对应的类名2，data对应的类名3]"

三元表达式

:class="[isActive ? activeCls :' ', errorCls]"

style

对象语法

:style = "{'color':color, 'fontSize':fontSize+'px'}"
	data: {
	color :’red ’,
	fontSize : 14
	}

:style ＝ "styles"
data{
	styles:{
		color:'red',
		fontSize:14 +'px'
	}
} 

数组语法

:style="[style1, style2, style3]" 
data{
	style1:{
		color:'red',
		fontSize:14 +'px'
	}
} 

总结：class在于用不用这个样式类，style在于改不改这个样式