Class 与 Style 如何动态绑定？

Class 与 Style 如何动态绑定？

class可以通过对象语法和数组语法进行动态绑定：
对象语法：

<div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>

data:{
	isActive:true,
	hasError:false
}

数组语法：

<div v-bind:class="[isActive?'activeClass':'',errorClass]"></div>

data:{
	isActive:true,
	activeClass:'active',
	errorClass:'text-danger'
}

Style也可以通过对象语法和数组语法进行动态绑定：
对象语法：

<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>

data:{
	activeColor:'red',
	fontSize:30
}

数组语法：

<div v-bind:style="[styleColor,styleSize]"></div>

data:{
	styleColor:{
		color:'red'
	},
	styleSize:{
		fontSize:'24px'
	}
}