v-bind指令

v-bind用于綁定數(shù)據(jù)和元素屬性
例如:綁定a標(biāo)簽的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標(biāo)簽的href屬性,當(dāng)a標(biāo)簽被點擊時,會根據(jù)對應(yīng)vue中的對應(yīng)的url數(shù)據(jù)進(jìn)行跳轉(zhuǎn)到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標(biāo)簽的href屬性和class屬性,以及img標(biāo)簽的src屬性,其數(shù)據(jù)分別對應(yīng)data里中的數(shù)據(jù)
也許你會奇怪,為什么它會知道a標(biāo)簽的hrefurl對應(yīng)的就是data中的url?這其實就是vue背后的一種默認(rèn)機制,它就是知道。但需要注意他們的名字得對應(yīng)

v-bind的綁定的屬性的值也可以是一個對象,例如:

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div>  

以上代碼,active表示要添加的類名,isActive對應(yīng)vue中的數(shù)據(jù),表示在什么情況下添加該類名,對應(yīng)isActive為真才添加active

由于使用頻繁,通常將v-bind:屬性名=" "的格式簡寫成:屬性名=" "

<div class="app">
    <a :class="{active:isActive}">click me</a>
</div>  

以上是v-bind基本使用!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容