first way
class的对象绑定
<div id="app">
<div :class="{colorred:isred}" >message</div>
</div>
data:{
isred:true
}
Dom
message
Second way:
<div id="app">
<div :class="[colorclass,colorclassone]" >message</div>
</div>
data:{
colorclass:"colorred",
colorclassone:"fontsize12"
}
Dom
message
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.colorred{color: red;}
</style>
</head>
<body>
<div id="app">
<div @click="handleClickDiv" :class="{colorred:becomered}">
hello wold!
</div>
</div>
<div id="app1">
<div @click="handleClickDiv" :class="[becomered]">
hello wold!
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
becomered:false
},
methods:{
handleClickDiv:function(){
this.becomered=!this.becomered
}
}
})
new Vue({
el:'#app1',
data:{
becomered:""
},
methods:{
handleClickDiv:function(){
if(this.becomered=="colorred"){
this.becomered=""
}else{
this.becomered="colorred";
}
}
}
})
</script>
</body>
</html>