说明
在网页中，有些元素的样式是变化的，vue 的 class绑定，就是用来控制 动态样式变化 的
实现方式
使用 v-bind:class 指令，简化写法 :class
其值有以下几种：
- 字符串
- json对象
- 数组
案例-值为字符串
应用场景：一般多使用这种方式，较为简单，也可以实现切换样式
效果图如下，点击下面按钮可以切换 class样式 ：
代码
<style>
.basic{
width: 300px;
height: 200px;
border: 1px black solid;
color: white;
}
.my_blue{
background-color:blue;
}
.my_green{
background-color:green;
}
.my_red{
background-color:red;
}
</style>
<body>
<div id="app">
class="basic"是基础样式，v-bind:class="msg_class"动态绑定样式
<div class="basic" v-bind:class="msg_class">{{msg}}</div> 绑定样式<br/>
<div class="basic" :class="msg_class">{{msg}}</div> 简化写法<br/>
<input type="button" value="蓝色" @click="changeBlue">
<input type="button" value="绿色" @click="changeGreen">
<input type="button" value="红色" @click="changeRed">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'绑定class',
msg_class:'my_blue'//定义msg_class
},
methods:{
changeBlue:function(){
console.log("原来："+this.msg_class)
this.msg_class='my_blue'//修改msg_class
console.log("现在："+this.msg_class)
},
changeGreen:function(){
console.log("原来："+this.msg_class)
this.msg_class='my_green'//修改msg_class
console.log("现在："+this.msg_class)
},
changeRed:function(){
console.log("原来："+this.msg_class)
this.msg_class='my_red'//修改msg_class
console.log("现在："+this.msg_class)
}
}
})
</script>
解释： 查看网页源代码，会发现：源代码中的 class样式 和 :class 样式，都在 网页源代码的 class 中，在点击按钮时，会改变 msg_class属性的值，也就改变的 class 样式
案例-json
应用场景：用于切换样式，当绑定样式的数量确定、样式名字确定时，推荐使用
效果如上一个案例
<div id="app">
切换样式<br>
<div class="basic" :class="msg_class">
{{msg}}<br>
</div> <br/>
<input type="button" value="蓝色" @click="changeBlue">
<input type="button" value="绿色" @click="changeGreen">
<input type="button" value="红色" @click="changeRed">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'绑定class',
msg_class:{ //定义msg_class
'my_blue':false, //为false表示不启用该样式
'my_green':true, //为true表示启用该样式
'my_red':false //为false表示不启用该样式
}
},
methods:{
changeBlue:function(){//修改msg_class
this.msg_class.my_blue=true
this.msg_class.my_green=false
this.msg_class.my_red=false
},
changeGreen:function(){
this.msg_class.my_blue=false
this.msg_class.my_green=true
this.msg_class.my_red=false
},
changeRed:function(){
this.msg_class.my_blue=false
this.msg_class.my_green=false
this.msg_class.my_red=true
}
}
})
</script>
案例-数组方式
应用场景：实现添加、删除多个样式
效果图如下，点击按钮可以添加、删除多个样式：
css
<style>
.basic{
width: 400px;
height: 100px;
border: 1px black solid;
}
.c1{
color: red;
}
.c2{
font-size: 24px;
}
.c3{
background-color: blue;
}
</style>
html
<div id="app">
添加、删除多个样式<br>
<div class="basic" :class="msg_class">
{{msg}}<br>
</div> <br/>
<input type="button" value="添加红色字" @click="addClass('c1')">
<input type="button" value="添加大号字" @click="addClass('c2')">
<input type="button" value="添加蓝色背景" @click="addClass('c3')"><br>
<input type="button" value="删除红色字" @click="delClass('c1')">
<input type="button" value="删除大号字" @click="delClass('c2')">
<input type="button" value="删除蓝色背景" @click="delClass('c3')">
</div>
js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'绑定class',
msg_class:[]//定义msg_class
// msg_class:'c1 c2 c3'//这么写也可以，但不方便增加、删除样式
},
methods:{
addClass:function(c){
var index=this.msg_class.indexOf(c)
if(index<0){
this.msg_class.push(c)
}
console.log(this.msg_class)
},
delClass:function(c){
var index=this.msg_class.indexOf(c)
if(index>=0){
this.msg_class.splice(index,1)
}
console.log(this.msg_class)
}
}
})
</script>