一、字符串写法
适用于样式的类名不确定，需要动态指定的情况。
style样式
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
模板和Vue实例
<body>
<div id="root">
<div class="basic" :class="color" @click="change">{{name}}</div>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'绑定class样式-字符串写法',
color:'red'
},
methods: {
change(){
if(this.color=='red'){
this.color='green'
}else{
this.color='red'
}
}
},
})
</script>
案例效果
点击容器，会修改容器的背景色。
二、数组写法
适用于要绑定的样式个数不确定、名字也不确定的情况。
style样式
<style>
.basic{
width: 400px;
height: 100px;
background-color: red;
}
.border{
border: 4px dashed rgb(2, 197, 2);
}
.radius{
border-radius: 20px;
}
</style>
模板和Vue实例
<body>
<div id="root">
<div :class="classArr">{{name}}</div>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'绑定class样式-数组写法',
classArr:['basic','border','radius']
}
})
</script>
案例效果
可以同时绑定数量不等的样式。
三、对象写法
适用于要绑定的样式个数确定、名字也确定，但要动态决定用不用。
style样式
<style>
.basic{
width: 400px;
height: 100px;
background-color: red;
}
.border{
border: 4px dashed rgb(2, 197, 2);
}
.radius{
border-radius: 20px;
}
</style>
模板和Vue实例
<body>
<div id="root">
<div class="basic" :class="classObj">{{name}}</div>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'绑定class样式-数组写法',
classObj:{
border:true,
radius:true
}
},
})
</script>
案例效果
通过对象的方式，可以绑定多个样式，同时动态用不用样式。
