v-bind主要是用來動態的綁定一個或者是多個特性，可以使用多種數據類型。
廢話不多說，先上程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-bind</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
<style>
.font{
font-size: 20px;
}
.classB
{
color: blue;
}
.classC{
color: brown;
}
.fontbig{
font-size: 30px;
}
</style>
</head>
<body>
<div id="test1">
<div v-bind:class="[classA,{classB:isB,classC:isC}]" :id="'div1'">樣式改變效果</div>
<input :id="'button'" :[test]="value" :style="{color:color1,width:bwidth,height:'30px'}" type="button" @click="changestyle()">
</div>
<script>
var num=false;
var vm1=new Vue({
el:'#test1',
data:{
classA:'font',
isB:true,
isC:false,
value:"默認樣式",
color1:"red",
bwidth:"150px",
test:"value"
}
});
var changestyle=()=>
{
num=!num;
if(num)
{
vm1.classA="fontbig"
vm1.isC=true;
vm1.value="修改後的樣式"
}
else
{
vm1.classA="font"
vm1.isC=false;
vm1.value="默認樣式"
}
}
</script>
</body>
</html>
（1）定義CSS樣式類font設置字體的大小爲20像素，類classB設置顏色爲藍色，類classC設置顏色爲褐色，類fontbig字體大小爲30像素。
（2）對標籤<div>綁定類變量ClassA ClassB ClassC，綁定id屬性。其中classA綁定的是font,classB是否使用取決於變量isB的值是否爲真，classC是否使用取決於變量isC的值是否爲真，id的屬性使用的是靜態的值值爲div1
（3）對標籤<input>綁定id使用的是靜態的值button，綁定變量屬性[test](屬性爲value)的值爲變量value的值，綁定樣式屬性其中的color屬性綁定的屬性爲變量color1的值，width屬性的綁定變量bwidth的值，height的值綁定靜態值30px。定義此標籤的類型爲按鈕，設置點擊事件，點擊事件發生後修改變量classA的值爲fontbig,value的值爲樣式改變效果,isC的值爲真。
效果
（1）默認效果爲
可以清楚的看到div標籤和input標籤的屬性和我們設置的是一致的。
（2）點擊後的效果
點擊按鈕之後div和input標籤的值和我們修改的是一樣的 。
總結
使用v-bind可以綁定屬性，可以使用變量，數組，結構體，靜態值等數據類型。同時屬性的值也可以使用變量來指定，但是需要vue2.6.0以後的版本才支持。使用雙引號引用的數據是變量，單引號嵌套在雙引號中的數據是靜態值。