Vue.js學習筆記：屬性綁定 v-bind
v-bind 主要用於屬性綁定，Vue官方提供了一個簡寫方式 :bind，例如：css
<!-- 完整語法 --> <a v-bind:href="url"></a>
<!-- 縮寫 --> <a :href="url"></a>
綁定HTML Classhtml
1、對象語法：數組
咱們能夠給v-bind:class 一個對象，以動態地切換class。注意：v-bind:class指令能夠與普通的class特性共存學習
HTML代碼：url
<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
<li>學習Vue</li>
<li>學習Node</li>
<li>學習React</li>
</ul>
CSS代碼：spa
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
JS代碼：.net
var vm= new Vue({
el:‘.box‘,
data:{
isColor:true,
isSize:true
}
})
從圖中能夠看到，HTML最終渲染爲 <ul class="box textColor textSize"></ul>code
當 isColor 和 isSize 變化時，class列表將相應的更新，例如，將isSize改爲false，class列表將變爲 <ul class="box textColor"></ul>htm
也能夠直接綁定數據裏的一個對象：對象
HTML代碼：
<ul class="box" :class="classObject"> <li>學習Vue</li> <li>學習Node</li> <li>學習React</li> </ul>
JS代碼：
var vm= new Vue({
el:‘.box‘,
data:{
classObject:{
‘textColor‘:true,
‘textSize‘:false //不渲染，注意看下面的截圖
}
}
})
2、數組語法
咱們能夠把一個數組傳給v-bind:class，以應用一個class列表
HTML代碼：
<ul class="box" :class="[classA, classB]"> <li>學習Vue</li> <li>學習Node</li> <li>學習React</li> </ul>
JS代碼：
var vm= new Vue({
el:‘.box‘,
data:{
classA:‘textColor‘,
classB:‘textSize‘
}
})
若是想根據條件切換列表中的class，能夠用三目運算
HTML代碼：
<ul class="box" :class="[isA?classA:‘‘, classB]"> <li>學習Vue</li> <li>學習Node</li> <li>學習React</li> </ul>
JS代碼：
var vm= new Vue({
el:‘.box‘,
data:{
classA:‘textColor‘,
classB:‘textSize‘,
isA:false
}
})
在這個例子中，首先判斷isA的boolean值，若是爲true，則渲染classA；若是爲false，則不渲染。classB沒有作三目運算，因此是始終顯示的，看看頁面截圖
對於多個class，能夠這麼寫：
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
綁定內聯樣式
1、對象語法
v-bind:style 的對象語法十分直觀--很是像CSS，其實它是一個Javascript對象，CSS屬性名必須用駝峯命名法 （官方文檔寫的是既能夠用駝峯也能夠用 短橫分隔命名法），可是用短橫分隔是會報錯的
HTML代碼：（這裏演示CSS屬性名用短橫分隔報錯）
<div id="box" :style="{color:activeColor, font-size:size}">紅嘴綠鸚哥</div>
JS代碼：
var vm= new Vue({
el:‘#box‘,
data:{
activeColor:‘#f00‘,
size:‘30px‘,
shadow:‘5px 2px 6px #000‘
}
})
頁面報錯：
當咱們按照駝峯命名法的規則去寫的時候，一切正常：
HTML代碼：
<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">紅嘴綠鸚哥</div>
查看頁面效果：
也能夠直接綁定到一個樣式對象，這樣更好，讓模板更清晰：
HTML代碼：
<div id="box" :style="styleObject">紅嘴綠鸚哥</div>
JS代碼：
var vm= new Vue({
el:‘#box‘,
data:{
styleObject:{
color:‘red‘,
fontSize:‘30px‘
}
}
})
2、數組語法
可將多個樣式對象應用到一個元素上
HTML代碼：
<div class="box" :style="[styleObjectA, styleObjectB]">好好學習，每天向上</div>
JS代碼：
var vm2= new Vue({
el:‘.box‘,
data:{
styleObjectA:{
fontSize:‘36px‘,
color:‘blue‘
},
styleObjectB:{
textDecoration:‘underline‘
}
}
})
頁面效果：
添加圖片SRC地址
給img標籤的src屬性賦值時，按照傳統的方法{{url}}：
HTML代碼：
<img class="box" src="{{url}}" >
JS代碼：
var vm= new Vue({
el:‘.box‘,
data:{
url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘
}
})
此時，圖片能夠正常顯示，可是會報一個404錯誤，查看控制檯能夠看到，Vue更加推薦咱們使用 v-bind:src
使用 v-bind:src 再來試試看
HTML代碼：
<img class="box" :src="url" >
查看頁面截圖：
本文轉載自 「dapengtalk」 博客