首先看代码
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8" />
<title>Hello world</title>
<script src="vue.js"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="root">
<!-- class对象绑定 -->
<div @click="handleDivClick" :class="{activated: isActivated}">HelloWorld</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isActivated: false
},
methods: {
handleDivClick: function () {
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>
当isActivated属性为ture时，class与样式activated绑定，当为false时，不绑定。
click事件为切换绑定与不绑定
