1.对class属性进行绑定
<style>
.app {
width: 200px;
height: 200px;
background-color: purple;
}
.app1 {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="app" :class="data1">
<button @click="fn">切换模式</button>
</div>
</body>
<script>
new Vue({
el:".app",
data:{
data1:"app",
flag:true
},
methods:{
fn(){
this.flag=!this.flag
if(this.flag==true){
this.data1="app"
}else{
this.data1="app1"
}
}
}
})
</script>
2.对style属性的绑定
<body>
<div id="app">
<button @click="fn">切换</button>
<div :style='{color:color,fontSize:fontsize,backgroundColor:n,width:"200px",height:"200px"}'>放学咯！！！！</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
color:"red",
fontsize:"20px",
flag:true,
n:"purple"
},
methods:{
fn(){
this.flag=!this.flag
if(this.flag==true){
this.color="red"
this.fontsize="14px"
this.n="purple"
}else{
this.color="blue"
this.fontsize="20px"
this.n="green"
}
}
}
})
</script>
