• v-bind(属性绑定)

之前所介绍的，若想在html动态的呈现资料可以使用{{ }}，但如果今天想动态的更换html中的属性呢?是不是也能在属性中使用{{ }}，像是:<img src=”{{imgsrc}}”>，是否也能正常跑出照片呢?答案是不行的!因为这种语法无法被套用在属性中。所以今天提供了v-bind属性，能够动态输出HTML元素上的属性，例如:id、class、style、href、imgSrc、自定义属性等

v-bind 指令的使用方法: v-bind:属性名称

接下来实例操作一下用v-bind来绑定呈现图片、连结和style样式吧!

Example

<div id="app">
    <h1 v-bind:style="{color:activecolor}">welcome</h1>
    <a v-bind:href="url">Click me to google</a>
    <img v-bind:src="imgsrc">
</div>  
<script>
var app = new Vue({
    el:'#app',
    data:{
        url:"https://www.google.com.tw/?hl=zh_TW",
        imgsrc:"http://photos1.blogger.com/blogger/6857/1451/320/James.Pond.1.jpg",
        activecolor:"green"
    }
});
</script>

图片来源:http://photos1.blogger.com/blogger/6857/1451/320/James.Pond.1.jpg
这样就能绑定成功，而要更改html的class等属性来操控style也可以使用V-bind!以後要更改html中的属性时，可以更加精确的从vue实体中更改就行。这个指令也提供了缩写的方式，像是<a :href="url">，更加简洁。

结语

下一篇将会介绍vue指令:v-on!