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>
頁面運行效果如下所示；
