vue class绑定--- highlight: tomorrow-night --- ```html 哈哈哈哈哈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aaa{
				color: red;
			}
			.bbb{
				color: blue;
			}
			.ccc{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 1. 理解
		   在应用界面中, 某个(些)元素的样式是变化的
		   class/style绑定就是专门用来实现动态样式效果的技术
		 2. class绑定: :class='xxx'
		   xxx是字符串
		   xxx是对象：这个语法类似于angular里面的aClass:true, bClass:false
		   xxx是数组
		 -->
		 <div id="d1">
			 <p :class="lx">哈哈哈哈哈</p>
			 <p :class="{aaa : flag, bbb : !flag}">呵呵呵呵呵</p>
			 <p :class="['aaa','ccc']">呵呵呵呵呵</p>
			 <!-- <p class="aaa ccc">呵呵呵呵呵</p> -->
			 <button @click="bs1()">变身1</button>
			 <button @click="bs2()">变身2</button>
		 </div>
		<script type="application/javascript" src="../js/vue.js"></script>
		<script type="application/javascript">
			var vm = new Vue({
				el : "#d1",
				data : {
					lx : "aaa",
					flag : true
				},
				/* 变身：点击button修改lx变量的值 */
				methods : {
					bs1(){
						/* this指代当前vue对象 */
						this.lx = "bbb";
					},
					bs2(){
						this.flag = !this.flag;
					}
				}
			});
		</script>
	</body>
</html>