console
new Vue({
el:"#app",
data:{
attachRed:false,
color:'green'
},
computed:{
divClasses:function(){
return {
red:this.attachRed,
blue:!this.attachRed
}
}
},
methods:{
}
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="demo"
@click="attachRed=!attachRed"
:class="divClasses">
</div>
<div class="demo" :class="{red:attachRed}"></div>
<div class="demo" :class="[color, {red: attachRed}]"></div>
<hr>
<p v-model="color"></p>
</div>
.demo{
width: 100px;
height: 100px;
background-color:gray;
display: inline-block;
margin: 10px;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}