vue學習:v-blind及class與style繫結
文章內容源於《Vue.js實戰》
一、瞭解v-bind指令
首先介紹基本用法和它的語法糖,主要用法是動態更新HTML元素上的屬性:
<div id="app" > <a v-bind:href="url">連結<a> <img v-bind:src="imgUrl"> <a :href ="url">連結<a> <img :src="imgUrl"> </div> <script> var app =new Vue({ el :' #app ', data: { url:'https://www.github.com', imgUrl:'http://xxx.xxx.xx/img.png' }) </script>
在資料繫結中,最常見的兩個需求就是元素的樣式名稱class和內聯樣式style的動態繫結,他們也是html屬性,因此也可以使用v-bind計算出表示式最終的字串就可以,不過有時候表示式的邏輯較為複雜,使用字串拼接方法閱讀和維護比較難,所以vue,js曾倩了對class和style的繫結。
二、繫結class的幾種方式
1、物件語法:
給v-bind:class設定一個物件,可以動態的切換class
<div class="app1"> <div :class="{'active':isActive}">我真的是黑色的!</div> </div>
var app1=new Vue({
el:'.app1',
data:{
isActive:true
}
});
上面的例項中,類名active依賴於資料isActive,當其為true時,div會擁有類名active,為false時則沒有。最終選自然結果為:
<div class="active"></div>
物件中也可以傳入多個屬性,來動態切換class。另外,:class 可以和普通的class共存,當class的表示式過長或者邏輯複雜是,還可以繫結計算書型。
<div class="app2"> <div class="static" :class="classes">我本來是黑色的……</div> </div>
var app2=new Vue({
el:'.app2',
data:{
isActive:true,
error:null
},
computed:{
classes:function(){
return {
active:this.isActive && !this.error,
'text-fail':this.error && this.error.type==='fail'
}
}
}
});
2、陣列語法
當需要應用多個class時,可以使用陣列語法,給:class繫結一個數組,應用一個class列表,也可以使用三元表示式來根據條件切換class,如上。
<div class="app3">
<div :class="[isActive ? activeCls:' ',errorCls]">三元表示式</div>
</div>
var app3=new Vue({
el:'.app3',
data:{
isActive:true,
activeCls:'active',
errorCls:'error'
}
});
這樣樣式error會始終應用,當資料isActive為真時,樣式activeCls才會被應用。
class有多個條件時,這樣寫會比較煩瑣,可以在陣列語法中使用物件語法。當然,與物件語法一樣,也可以使用data、computed和methods三種方法,如下。
<div class="app4">
<div :class="[{'active':isActive},errorCls,classes]">我看看</div>
</div>
var app4=new Vue({
el:'.app4',
data:{
isActive:true,
errorCls:'error',
size:'large',
disabled:true
},
computed:{
classes:function(){
return [
'btn',
{
['btn-'+this.size]:this.size!=='',
['btn-disabled']:this.disabled
}
]
}
}
});
3、在元件上使用(看書到後面章節詳細介紹,這裡先不寫了)
4、繫結內聯樣式
使用v-bind:style(即 :style)可以給元素繫結內聯樣式,方法與 :class 類似,也有物件語法和陣列語法,看起來很像直接現在元素上寫CSS
<div class="app5">
<div :style="{'color':color,'fontSize':fontSize+'px'}">文字</div>
</div>
var app5=new Vue({
el:'.app5',
data:{
color:'red',
fontSize:14
}
});
CSS屬性名稱使用駝峰命名或短橫分格。
大多數情況下,直接寫一長串的樣式不便於閱讀和維護,所以一般寫在data或computed裡
<div class="app6">
<div :style="styles">文字</div>
</div>
var app6=new Vue({
el:'.app6',
data:{
styles:{
color:'red',
fontSize:14+'px'
}
}
})
應用多個樣式時,可以使用陣列語法:
<div :style="[styleA,styleB]">文字</div>
在實際業務中, :style 的陣列語法並不常用,因為往往可以寫在一個物件裡面;而較常用的應當是計算屬性。
另外,使用 :style 時,Vue.js會自動給特殊的CSS屬性名稱增加字首,比如transform。