不多说，代码如下，通过数组与对象的形式来完成样式的绑定与变动,
以下实现点击字体颜色变红再点击变黑的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的样式绑定</title>
<script src="vue.js"></script>
<style type="text/css">
.class111{
color:red;
}
</style>
</head>
<body>
<div id = 'app2'>
<div :class = "{class111:enabled}" @click="changeColor">你好啊1</div>
<div :class = "[class222]" @click="changeColor2">你好啊2</div>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
enabled:false,
class222:""
},
methods:{
changeColor:function(){
this.enabled = !this.enabled;
},
changeColor2:function(){
this.class222 = this.class222 === ""?"class111":"";
}
}
});
</script>
</body>
</html>
有疑问欢迎评论