<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.a{
width: 100px;
height: 100px;
}
.b{
background-color: red;
}
</style>
<body>
<!--
上面定义了两个css样式，第一个定义了宽高，在容器里面固定使用了a样式，b样式则通过点击事件，绑定在了mood上，当点击事件执行时，修改mood，就会动态将b样式添加进去
这种方式只适用于样式的类名不确定，需要动态指定，或者动态增加样式的情况，称之为字符串写法
另外还可以绑定数组的写法，先把所有的类（css）定义好，然后扔进data中定义好的一个数组中，通过代码维护数组中的元素即可动态添加、减少样式
数组写法适用于要绑定的样式、个数、名称都不确定
第三种写法就是对象写法，通过定义一个对象，对象里面的属性对应一个类（css），属性的值是布尔类型，如果为true则表示使用这个样式，反之不使用
-->
<div id = "app">
<button class="a" :class="mood" @click="mood = 'b'">aaa</button>
<button :class="moodObj" >aaa</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data :{
mood: ['a','b'],//数组也可以，操作数据即可增加、减少样式
moodObj: {
a: true,
b: false
}//对象写法,通过改变a、b的布尔值决定该样式是否使用
}
})
</script>
</body>
</html>
