1.前言
在日常开发中经常有对Dom元素动态绑定一些class属性或者style样式，我们可以使用
v-bind指令来实现效果，对于Vue指令感兴趣的同学不妨可以看一看我之前写的文章 Java程序员入门Vue基础之指令入门学习（三）。
2. 绑定HTML Class
v-bind 指令主要用法就是动态的更新DOM元素上的属性，下面我们将演示在Vue中如何动态切换和更新Class。
2.1 对象语法
我们可以使用 v-bind 指令动态切换class，需要注意的是在HTML元素上定义的普通class与绑定的class对象可以共存。案列代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='handle' >点击切换</button>
<div v-bind:class="{classB:isClassB,classC:isClassC}">
{{msg}}
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let flag =false;
let app = new Vue({
el:'#app',
data: {
isClassB:true,
isClassC:false,
msg:''
},
methods: {
handle() {
if(flag) {
app.msg='我变红了'
app.isClassB=false;
app.isClassC=true;
flag =false;
} else {
app.msg='我变绿了'
app.isClassB=true;
app.isClassC=false;
flag=true;
}
}
},
})
</script>
<style type="text/css">
.classB {
background-color: greenyellow;
}
.classC {
background-color: red;
}
</style>
</html>
页面运行效果如下所示：
2.2 数组语法
当需要应用多个class时，可以使用数组语法，即给class绑定一个数组列表。代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='handle' >点击切换</button>
<div v-bind:class="{classB:isClassB,classC:isClassC}">
{{msg}}
</div>
<div :class="[isTrue?classA:classD]">
这是一段文字
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let flag =false;
let app = new Vue({
el:'#app',
data: {
isClassB:true,
isClassC:false,
msg:'',
isTrue:true,
classA:'classA',
classD:'classD'
},
methods: {
handle() {
if(flag) {
app.msg='我变红了'
app.isClassB=false;
app.isClassC=true;
flag =false;
app.isTrue=true
} else {
app.msg='我变绿了'
app.isClassB=true;
app.isClassC=false;
flag=true;
app.isTrue=false
}
}
},
})
</script>
<style type="text/css">
.classB {
background-color: greenyellow;
}
.classC {
background-color: red;
}
.classA {
background-color: cyan;
}
.classD {
background-color: darkkhaki;
}
</style>
</html>
页面运行效果如下所示：
在上面我们使用到了一个三元运算符，对于JAVA程序员来讲这个运算符在熟悉不过了,就不在做介绍了。
3 绑定内联样式
在上面我们介绍了给元素的Html 的class属性进行绑定，另一方面我们也可以使用 v-bind 指令给元素绑定内联样式。其也有对象语法和数组语法两种，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div :style="{border:border,fontSize:fontSize+'px'}">
这是一个div
</div>
<div :style="customStyle">
这是另一个div
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app= new Vue(
{
el:'#app',
data:{
border:'5px solid red',
fontSize:'22',
customStyle: {
border:'5px solid green',
fontSize:'22',
margin:'10px 0px'
}
}
}
)
</script>
</html>
页面运行效果如下所示；
