# v-bind v-bind是處理HTML中的標簽屬性的，例如`<div></div>`就是一個標簽，`<img>`也是一個標簽，我們綁定`<img>`上的src進行動態賦值 ~~~ <div id="app"> <img v-bind:src="imgSrc" width="200px"> </div> ~~~ 在html中我們用`v-bind:src=”imgSrc”`的動態綁定了src的值，這個值是在vue構造器里的data屬性中找到的。 ~~~ var app=new Vue({ el:'#app', data:{ imgSrc:'http://fv-static.b0.upaiyun.com/uploads/598fdba8dd4e4.jpeg' } }) ~~~ 縮寫 ~~~ <!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> ~~~ 綁定CSS樣式 在工作中我們經常使用v-bind來綁定css樣式： 在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明。 1. 直接綁定class樣式 ~~~ <div :class="className">1、綁定classA</div> <style> .classA { color: red; } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className: 'classA' } }) </script> ~~~ 2. 綁定classA并進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。 ~~~ <div :class="{classA:isOk}">2、綁定class中的判斷</div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className: 'classA', isOk: false, } }) </script> ~~~ 配合v-model來個雙向數據綁定 ~~~ <div id="app"> <div :class="{classA:isOk}">綁定class</div> <input type="checkbox" id="isOk" v-model="isOk" /> <label for="isOk">isOk={{isOk}}</label> </div> <style> .classA { color: red; } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className: 'classA', isOk: false, } }) </script> ~~~ 3. 綁定class中的數組 ~~~ <div id="app"> <div :class="[classA,classB]">綁定class</div> </div> <style> .classA { color: red; } .classB { font-size: 50px } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { classA: 'classA', classB: 'classB', } }) </script> ~~~ 4. 綁定class中使用三元表達式判斷 ~~~ <div id="app"> <div :style="isOk?classA:classB">綁定class</div> </div> <style> .classA { color: red; } .classB { font-size: 50px } </style> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { classA: 'classA', classB: 'classB', isOk: false, } }) </script> ~~~ 5. 綁定style ~~~ <div id="app"> <div :style="{color:red,fontSize:font}">綁定class</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { red: 'blue', font: '20px', } }) </script> ~~~ 6. 用對象綁定style樣式 ~~~ <div id="app"> <div :style="styleObject">綁定class</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { styleObject: { color: 'green', //注意這邊不要寫font-size,要把后面的變大寫,vue的坑 fontSize: '20px', } } }) </script> ~~~