Vue.js中的v-bind属性详解和案例

动态地绑定一个或多个 attribute(属性)，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<!-- 绑定 attribute --> <img v-bind:src="imageSrc" /> <!-- 动态 attribute 名 --> <button v-bind:[key]="value"></button> <!-- 简写/缩写 --> <img :src="imageSrc" /> <!-- 动态 attribute 名缩写 --> <button :[key]="value"></button> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName" /> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个全是 attribute 的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- prop 绑定。"prop" 必须在 my-component 声明 --> <my-component :prop="someThing"></my-component> <!-- 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>

v-bind具体实例:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="app">         <!-- v-bind 绑定属性值的 v-bind:属性名字 -->         <!-- <img v-bind:src="img_path" alt=""> -->         <a v-bind:href="'http://127.0.0.1:900/getone?id='+ids"></a>     </div> </body> <script>     var app = new Vue({         el:'#app',         data:{             img_path:'./4-small.jpg',             ids:'1'         }     }); </script>

class绑定

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div id="app">         <!-- <div v-bind:style="{color:c,fontSize:s+'px'}">hahah </div> -->         <!-- v-bind 简写形式 -->         <div :style="[c,f]">hahah </div>     </div> </body> <script>     var app = new Vue({         el:'#app',         data:{             c:{                 color:'red'             },             f:{                 fontSize:'50px'             }         }     }); </script>