## v-bind指令 **縮寫：** : **類型：** any (with argument) | Object (without argument) **參數：** attrOrProp (optional) **修飾符：** - .prop - 被用于綁定 DOM 屬性。(what’s the difference?) - .camel - (2.1.0+) transform the kebab-case attribute name into camelCase. (supported since 2.1.0) - .sync (2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器。 **用法：** 動態地綁定一個或多個特性，或一個組件 prop 到表達式。 在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。 在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。 沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。 >[info] 示例 ~~~ <!-- 綁定一個屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- with inline string concatenation --> <img :src="'/path/to/images/' + fileName"> <!-- class 綁定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 綁定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定一個有屬性的對象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通過 prop 修飾符綁定 DOM 屬性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 綁定. “prop” 必須在 my-component 中聲明。 --> <my-component :prop="someThing"></my-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> ~~~ .camel 修飾符允許在使用 DOM 模板時將 v-bind 屬性名稱駝峰化，例如 SVG 的 viewBox 屬性： ~~~ <svg :view-box.camel="viewBox"></svg> ~~~ 在使用字符串模板或通過 vue-loader/vueify 編譯時，無需使用 .camel。 >[success]代碼示例1 ~~~ <div id="demo"> <a href="#" v-bind:href="hrefvalue"> <img v-bind:class="c" src="logo.png" alt=""> </a> </div> <script> var app=new Vue({ el:'#demo', data:{ hrefvalue:'http://www.baidu.com', c:'myred' } }); </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind1.html ---- >[success]代碼示例2 ~~~ <div id="box"> <img v-bind:src="url" :width='w'/> <img :src="url" :width='w'/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { url:'logo.png', w:'100px' }, methods:{ show:function(){ alert("你按回車了") } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind2.html --- >[success]代碼示例3 ~~~ <div id="box"> <span :class="[red, b]">文字……</span> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { red:'red', b:'blue' }, methods:{ } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind3.html ---- >[success]代碼示例4 ~~~ <div id="box"> <span :class="{red:a,blue:b}">文字……</span> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { a:true, b:false }, methods:{ } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind4.html --- >[success]代碼示例5 ~~~ <div id="box"> <span :style="[c,b]">文字……</span> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { c:{'color':'red'}, b:{'backgroundColor':'blue'} }, methods:{ } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind5.html ---- >[success]代碼示例6 ~~~ <div id="box"> <span :style="a">文字……</span> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { a:{ color:'red', background:'blue' } }, methods:{ } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind6.html