做一个需求：点击网页中的数据，点击后，数据变成红色，再点击后，数据的颜色还原。
方法1：class的对象绑定
借助class和对象的形式来做样式和数据的绑定
<script src="./vue.js"></script>
<style>
.activated{
color: red
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>
Hello World
</div>
</div>
<script>
vm = new Vue({
el:"#app",
data:{
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
和常规一样，点击页面上的数据变色，那么肯定绑定一个事件，即v-on:click。
这里新出来一个class属性。例子中表示的是，v-bind绑定一个class属性，class属性的名字叫activated，class属性有一个参数isActivated，这个参数在实例中被输入的值为false，当为false时，class将不起作用。
再者，需要在头部head标签内增加style标签用来规定样式，style内输入 .activated{color:red}
在style中，class就是以“.”开头，activated是这个类的名字，里面输入样式的内容，是color：red。
这样，body中的div完成了页面显示，script完成了对数据的控制，头部的style完成了如何渲染的工作。
方法2：class与数组绑定
<script src="./vue.js"></script>
<style>
.activated{
color: red
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activatedOne]"
>
Hello World
</div>
</div>
<script>
vm = new Vue({
el:"#app",
data:{
activatedOne:""
},
methods:{
handleDivClick:function(){
this.activatedOne = "activated"
}
}
})
</script>
</body>
这里class与一个数组绑定，数组内有一个变量activatedOne，在实例data中，activatedOne被置为空，当点击数据的时候，会激发handleDivClick函数，函数内将变量activatedOne从空设置为activated。这样，class数组内的内容就是activated，这个内容在style中被体现，颜色也就渲染了。
但是这样做只能把颜色从黑色变为红色，无法再变回去。
若要变回去，代码如下：
<script src="./vue.js"></script>
<style>
.activated{
color: red
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activatedOne]"
>
Hello World
</div>
</div>
<script>
vm = new Vue({
el:"#app",
data:{
activatedOne:""
},
methods:{
handleDivClick:function(){
this.activatedOne = this.activatedOne ==="activated" ? "" : "activated"
}
}
})
</script>
</body>
其中methods做了改变：
这个函数包含了三元表达式（this.activatedOne ==="activated" ? "" : "activated"），三元表达式的结果将输入给this.activatedOne。当this.activatedOne等于activated时，点击后将变成等于空；如果this.activatedOne不等于activated的时候，点击后，将变成等于activated。这样就实现了点击后不断变色的效果。
