Vue的class和style绑定

在应用界面中个，某个(些)元素的样式是变化的，使用vue的class/style绑定就是专门用来实现动态样式效果的绑定

class绑定

1 :class=‘xxx’
2 表达式是字符串: ‘classA’
3 表达式是对象: {classA:isA, classB: isB}
4 表达式是数组: [‘classA’, ‘classB’]

style绑定

1. :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
2. 其中 activeColor/fontSize 是 data 属性

具体使用见下代码：

<style type="text/css">
			.aClass{
				color: red;
			}
			.bClass{
				color: blue;
			}
			.cClass{
				font-size: 30px;
			}
</style>
<div id="demo">
			<h2> 1. class绑定： ：class='xxx'</h2>
			<p  class="cClass" :class="a">这是要改变颜色的文本,是一个字符串</p>
			<p   :class="['aClass','cClass']">这是要改变颜色的文本,是一个对象</p>
			<h2> 2. style绑定</h2>
			<p :style="{color:activeColor,fontSize:fontSize+'px'}">绑定样式</p>
			<button @click="update">更新颜色</button>
</div>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#demo',
				data:{
					a:'aClass',
					isA:true,
					isB:false,
					activeColor:'yellow',
					fontSize:30
					
				},
				methods:{
					update:function(){
						this.a='bClass';
						this.isA=false;
						this.isB=true;
						this.activeColor='green';
						this.fontSize=40;
					}
				}
			})
		</script>

在更改颜色之前效果如下：

点击更改颜色，使用vue的class和style样式之后，如下图：