1. 定義
1.1 v-bind 指令被用來響應地更新 HTML 屬性，其實它是支持一個單一 JavaScript 表達式 （v-for 除外）。
2. 語法
2.1 完整語法：<span v-bind:class="classProperty"></span >，解釋：v-bind 是指令，: 后面的 class 是參數，classProperty 則在官方文檔中被稱為“預期值”。
2.2 縮寫語法：<span :class="classProperty"></span >，解釋：: 后面的 class 是參數，classProperty 則在官方文檔中被稱為“預期值”。
3. 用法
3.1 綁定一個屬性
全寫代碼示例：
<template>
<div>
<p class="p1">{{title}}</p>
<span v-bind:value="first" class="spancss1">{{text}}</span>
</div>
</template>
<script>
export default {
name: "v-bindLearn",
data() {
return {
title: "v-bind學習",
first: "span1",
text: "綁定一個屬性"
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>
簡寫代碼示例：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span :value="first" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7 <script>
8 export default {
9 name: "v-bindLearn",
10 data() {
11 return {
12 title: "v-bind學習",
13 first: "span1",
14 text: "綁定一個屬性"
15 }
16 }
17 }
18 </script>
19 <style scoped>
20 .p1{
21 text-align: left;
22 }
23 .spancss1{
24 float: left;
25 }
26 </style>
3.2 內聯字符串拼接代碼示例
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <a :href="'http://'+first" class="spancss1">{{text}}</a>
5 </div>
6 </template>
7 <script>
8 export default {
9 name: "v-bindLearn",
10 data() {
11 return {
12 title: "v-bind學習",
13 first: "www.baidu.com",
14 text: '點擊跳轉到百度鏈接'
15 }
16 }
17 }
18 </script>
19 <style scoped>
20 .p1{
21 text-align: left;
22 }
23 .spancss1{
24 float: left;
25 }
26 </style>
3.3 class綁定
3.3.1 對象語法
span標簽綁定一個對象
方法一直接在template中聲明對象，對象中聲明屬性prop1和prop2，在javascrip輸出聲明屬性是否可用，如果聲明屬性value值設置為true，則聲明屬性值可用，如果聲明屬性value值設置為false，則聲明屬性值不可用，代碼如下所示：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:class="{prop1:isTrue,prop2:isActive}" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 isTrue: false,
15 isActive: true,
16 text: "對象語法1"
17 }
18 }
19 }
20 </script>
21
22 <style scoped>
23 .p1{
24 text-align: left;
25 }
26 .spancss1{
27 float: left;
28 }
29 </style>
方法二直接在template中聲明對象名，在javascrip中聲明屬性prop1和prop2並輸出是否可用，如果聲明屬性value值設置為true，則聲明屬性值可用，如果聲明屬性value值設置為false，則聲明屬性值不可用，代碼如下所示：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:class="obj" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 obj: {
15 prop1: true,
16 prop2: false
17 },
18 text: "對象語法2"
19 }
20 }
21 }
22 </script>
23
24 <style scoped>
25 .p1{
26 text-align: left;
27 }
28 .spancss1{
29 float: left;
30 }
31 </style>
3.3.2 數組語法
方法一直接在template中聲明數組名，在javascript中輸出需要的數組元素，示例代碼如下：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:class="arr" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 arr: ['prop1','prop2','prop3'],
15 text: "數組語法1"
16 }
17 }
18 }
19 </script>
20
21 <style scoped>
22 .p1{
23 text-align: left;
24 }
25 .spancss1{
26 float: left;
27 }
28 </style>
方法二在template中聲明數組並定義其元素，在javascript中輸出數組定義元素是否可用，如果需要使用此數組元素，則在javascript中定義要輸出對應數組元素的屬性值，如果不需要使用此數組元素，則設置此數組元素的屬性值為false，示例代碼如下：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:class="[prop1,prop2,prop3]" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 prop1: 'prop1',
15 prop2: false,
16 prop3: 'prop3',
17 text: "數組語法2"
18 }
19 }
20 }
21 </script>
22
23 <style scoped>
24 .p1{
25 text-align: left;
26 }
27 .spancss1{
28 float: left;
29 }
30 </style>
方法三根據條件切換列表中的 綁定的class，在template聲明數組和條件表達式，在javascript中輸出數組元素的條件表達式的值，示例代碼如下：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:class="[prop1?'prop1':'',prop2,prop3?'prop3':'',prop4?'prop4':'prop5',prop6?'prop6':'prop5']" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 prop1: false,
15 prop2: 'prop2',
16 prop3: true,
17 prop4: true,
18 prop6: false,
19 text: "數組語法3"
20 }
21 }
22 }
23 </script>
24
25 <style scoped>
26 .p1{
27 text-align: left;
28 }
29 .spancss1{
30 float: left;
31 }
32 </style>
3.4 綁定內聯樣式
3.4.1 對象語法，在template中聲明屬性，在javascript輸出對應的屬性值，示例代碼如下：
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:style="{background:color1,fontSize:fontSize+'px'}" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 color1: 'green',
15 fontSize: 25,
16 text: "綁定內聯樣式1"
17 }
18 }
19 }
20 </script>
21
22 <style scoped>
23 .p1{
24 text-align: left;
25 }
26 .spancss1{
27 float: left;
28 }
29 </style>
3.4.2 數組語法，可以將多個樣式對象應用到同一個元素上
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "v-bindLearn",
11 data() {
12 return {
13 title: "v-bind學習",
14 prop1: {
15 background:'green'
16 },
17 prop2: {
18 fontSize: '25px',
19 fontWeight: 'bolder'
20 },
21 text: "綁定內聯樣式1"
22 }
23 }
24 }
25 </script>
26
27 <style scoped>
28 .p1{
29 text-align: left;
30 }
31 .spancss1{
32 float: left;
33 }
34 </style>
3.4.3 當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7 <script>
8 export default {
9 name: "v-bindLearn",
10 data() {
11 return {
12 title: "v-bind學習",
13 prop1: {
14 background:'green'
15 },
16 prop2: {
17 fontSize: '25px',
18 transform: 'rotate(7deg)'
19 },
20 text: "綁定內聯樣式1"
21 }
22 }
23 }
24 </script>
25 <style scoped>
26 .p1{
27 text-align: left;
28 }
29 .spancss1{
30 float: left;
31 }
32 </style>
3.4.4 多重值綁定，從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶前綴的值，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么就只會渲染 display: flex
1 <template>
2 <div>
3 <p class="p1">{{title}}</p>
4 <span v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" class="spancss1">{{text}}</span>
5 </div>
6 </template>
7 <script>
8 export default {
9 name: "v-bindLearn",
10 data() {
11 return {
12 title: "v-bind學習",
13 text: "綁定內聯樣式4"
14 }
15 }
16 }
17 </script>
18 <style scoped>
19 .p1{
20 text-align: left;
21 }
22 .spancss1{
23 float: left;
24 }
25 </style>
總結：v-bind動態地綁定一個或多個特性，或一個組件 prop 到表達式，可以很方便的渲染DOM，本文的錯誤和不足之處，歡迎之處！