vue 动态添加属性样式(style)和类名(class)

• 凡是有-的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>