vue class绑定和style绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<style>

		.redClass{
			color: red;
		}
		.blueClass{
			color: blue;
		}
		.f{
			font-size: 22px;
		}
	</style>
	<body>
		<div id="app">
			
			<h1> class绑定</h1>
			<!--
				:class="xxx"
				xxx是字符串
				xxx是对象
				xxx是数组
			-->
			<br />
			<p class="f" :class="a">xxx是字符串</p>
			<p :class="{redClass:true,f:true}">xxx是对象</p>
			<p :class="{blueClass:c,f:b}">xxx是对象</p>
			<p :class="['redClass','f']">xxx是数组</p>
			<button @click="change">变为蓝色</button>
			<br />
			<h2> style绑定</h2>
			<!--驼峰命名-->
			<p :style="{color:color,fontSize:fontSize +'px',marginLeft:ml}">测试</p>
			
		</div>
		<script>
			var v=new Vue({
				el:'#app',
				data:{
					a:'redClass',
					c:false,
					b:false,
					color:'red',
					fontSize:30,
					ml:"50px"
				},
				methods:{
					change(){
						this.a="blueClass"
						this.b=true;
						this.c=true;
					}
				}
			})
		</script>
	</body>
</html>