说明
在网页中,有些元素的样式是变化的,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>