v-bind
用于绑定数据和元素属性
例如:绑定a
标签的href
属性
<div class="app">
<a v-bind:href="url">click me</a>
</div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
}
});
以上代码中,使用v-bind
绑定了a
标签的href
属性,当a
标签被点击时,会根据对应vue
中的对应的url
数据进行跳转到https://www.baidu.com
不光是href
属性可以被v-bind
指令绑定,任何属性都可以被绑定
例如,绑定src
属性、class
属性
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
kclass:"btn btn-default"
}
});
上述代码中,同时绑定了a
标签的href
属性和class
属性,以及img
标签的src
属性,其数据分别对应data
里中的数据
也许你会奇怪,为什么它会知道a
标签的href
值url
对应的就是data
中的url
?这其实就是vue
背后的一种默认机制,它就是知道。但需要注意他们的名字得对应
用v-bind
的绑定的属性的值也可以是一个对象,例如:
<div class="app">
<a v-bind:class="{active:isActive}">click me</a>
</div>
以上代码,active
表示要添加的类名,isActive
对应vue
中的数据,表示在什么情况下添加该类名,对应isActive
为真才添加active
类
由于使用频繁,通常将v-bind:属性名=" "
的格式简写成:属性名=" "
<div class="app">
<a :class="{active:isActive}">click me</a>
</div>
以上是v-bind
基本使用!