• 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
• 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

<template>
	<div :style="{backgroundColor: bgColor}" >ccc</div>
</template>

<script>
export default{
	data(){
		return {
			bgColor:'#C7CA56'
		};
	}
}
</script>

class的动态绑定

对象

<template>
	<div class="test" :class="{'test1': test1}" >ccc</div>
</template>

<script>
export default{
	data(){
		return {
			test1:true,
		};
	}
}
</script>
<style>
.test{
    width:100px;
}
.test1{
    color: red;
    height: 100px;
}
</style>
   

数组

<template>
	<div class="test" :class="[test]" >ccc</div>
</template>

<script>
export default{
	data(){
		return {
			test:test1,
		};
	}
}
</script>
<style>
.test{
    width:100px;
}
.test1{
    color: red;
    height: 100px;
}
</style>