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

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

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

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

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

<!-- 绑定 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具体实例:

 <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绑定

<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>