v-bind主要是用來動態的綁定一個或者是多個特性，可以使用多種數據類型。
廢話不多說，先上程序。
（1）定義CSS樣式類font設置字體的大小為20像素，類classB設置顏色為藍色，類classC設置顏色為褐色，類fontbig字體大小為30像素。
（2）對標籤
綁定類變量ClassA ClassB ClassC，綁定id屬性。其中classA綁定的是font,classB是否使用取決於變量isB的值是否為真，classC是否使用取決於變量isC的值是否為真，id的屬性使用的是靜態的值值為div1
（3）對標籤綁定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以後的版本才支持。使用雙引號引用的數據是變量，單引號嵌套在雙引號中的數據是靜態值。
收藏
舉報
分享到:
