通过给html元素的class属性绑定vue中的属性值,得到样式的动态绑定。
传统的class=“样式”,通过v-bind:class="{样式:布尔值}"(布尔值=true显示反,false不显示),再通过将布尔值设置成vue中的属性值就可以实现动态绑定了。
例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div01{
width: 400px;
height: 200px;
background-color: beige;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{red:temp}" class="div01"></div>
<div :class="mychange" class="div01"></div>
<div class="div01"></div>
<br>
<button type="button" v-on:click="change()">改变样式</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
temp:false
},
methods:{
change:function(){
this.temp = !this.temp;
}
},
computed:{
mychange:function(){
return {
green:this.temp
}
}
}
})
</script>
</html>