Vue 2.0學習筆記：v-bind">Vue 2.0學習筆記：v-bind
分類：IT技術 時間:2017-10-02
經過前面的學習，我們知道 v-on 可以實現事件綁定， v-model 可以實現雙向數據綁定。在Vue中除了這兩個指令，還有一個 v-bind 指令。它可以往元素的屬性中綁定數據，也可以動態地根據數據為元素綁定不同的樣式。簡單說， v-bind 是用來綁定HTML屬性 。
JavaScript給HTML標簽指定屬性
HTML不同的標簽具有 不同的屬性 。我們在寫標簽的時候一般會根據不同的標簽指定不同的屬性，比如 img 標簽，我們會指定 src 和 alt 屬性。
<img src=http://www.tuicool.com/articles/"../images/logo.png" alt="w3cplus" />
但我們很多時候需要動態的給HTML標簽動態指定屬性的值。比如，我們這個 img 的 src 和 alt 是動態數據 data （也就是服務端傳過來的）。我們需要借助javascript來實現。在JavaScript中，我們有三個方法用來控制元素的屬性：
-
Element.getAttribute() ：獲取元素上一個指定的屬性值。如果指定的屬性不存在，則返回 null 或 "" （空字符串）
-
Element.setAttribute() ：指定元素上的一個屬性值。如果屬性已經存在，則更新該值；否則將添加一個新的屬性用指定的名稱和值
-
Element.removeAttribute() ：從指定的元素中刪除一個屬性
同樣拿 img 標簽的 src 和 alt 來舉例。比如我們有一個默認的圖片元素：
<div class="wrapper">
<img src=http://www.tuicool.com/articles/"//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg" alt="美女與野獸">
// JavaScript
let data = {
imgInfo: {
imgUrl:'//www.w3cplus.com/sites/default/files/blogs/2017/1709/yuesou.jpg',
alt: '野獸'
}
}
const imgEle = document.querySelector('.figure')
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
imgEle.setAttribute('src', data.imgInfo.imgUrl)
imgEle.setAttribute('alt', data.imgInfo.alt)
}, false)
效果如下：
點擊按鈕就可以把“美女”切換成“野獸”。如下圖所示：
在Vue中，我們采用今天要學習的 v-bind 指令，事情會變得更容易的多。那麽接下來的內容中，我們會看到如何用 v-bind 來給HTML的元素綁定屬性。
v-bind 用法
前面也提到過了， v-bind 是Vue的一個指令，主要功能是動態地綁定一個或多個特性，或一個組件 props 到表達式。常見的使用方式有：
<!-- 綁定一個屬性 -->
<img v-bind:src=http://www.tuicool.com/articles/"imgUrl" />
![]()
![]()
<!-- Template -->
<div id="app">
<img :src=http://www.tuicool.com/articles/"imgUrl" v-bind:alt="imgAlt" :class="{figure: className}" />
// JavaScript
let app = new Vue({
el:'#app',
data () {
return {
imgUrl: '//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg',
imgAlt: '美女',
className: true
}
}
})
這個時候 data 數據中的 imgUrl 、 imgAlt 和 className 屬性的值對應綁到了 img 元素中的 src 、 alt 和 class 屬性上。看到的效果如下：
這個時候如果你在瀏覽器開發者的控制臺上修改 app.imgUrl 、 app.imgAlt 和 app.className 的值之後，可以看到 img 元素對應的 src 、 alt 和 class 都會有所改變，如下圖所示：
上面這種 v-bind 指令是最簡單，也是最易理解的，但實際上，Vue指令的預期值，比如 v-bind:alt="imgAlt" 中， v-bind 是指令， : 號後面的 alt 是參數，而 imgAlt 是我們預期想綁定的值（規範中也稱其為 預期值 ）。除了上示這樣的綁定一個字符串類型變量，其實 v-bind 還支持一個單一的JavaScript表達式（ v-for 除外）。
在我們的實際項目中，最常見的是給元素綁定類名和樣式。 官方文檔 也特意以類名和樣式綁定為例向大家介紹了 v-bind 的各種使用。接下來的內容，我們也以這兩個部分為主線來介紹 v-bind 。當然， v-bind 可以用來綁定HTML標簽元素上任意的屬性，使用方式是一樣的。
Class與Style綁定
數據綁定的一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性，我們可以用 v-bind 處理它們：只需要計算出表達式最終的字符串。不過，字符串拼接麻料峭春寒又易錯。因此，在 v-bind 用於 class 和 style 時，Vue專門增強了它。表達式的結果類型除了字符串這外，還可以是對象或數組。
綁定HTML Class
先來看 v-bind 給元素綁定類名。主要方式有：
- 執行運算
- 執行函數
- 對象語法
- 數組語法
- ES6擴展語法
咱們依次來看這些方法怎麽來操作類名。
執行運算
執行運算，其實就是運算的表達式，簡單的說，就是有 + 來連接 data 中多個屬性，比如：
<div id="app">
<button :class="classA + ' ' + classB">美女與野獸</button>
</div>
// JavaScript
let app = new Vue({
el: '#app',
data: {
classA: 'button',
classB: 'large-button',
classC: 'primary-button'
}
})
效果如下：
可以看到， button 和 large-button 兩個類名以及對應的樣式已經綁定到了 <button> 元素上：
執行函數
除了在 v-bind 中使用表達式之外，還可以使用執行函數，比如下面這個示例：
<!-- Template -->
<div id="app">
<button :class="getClass()">美女與野獸</button>
</div>
// JavaScript
let app = new Vue({
el: '#app',
data: {
getClass: function () {
return `button large-button primary-button`
}
}
})
效果如下：
同樣的，對應的 button 、 large-button 和 primary-button 類名添加到了 <button> 元素上：
對象語法
我們還可以給 v-bind:class 傳一個對象，這樣我們就能動態的切換 class 。同樣拿前面的Button為例：
<!-- Template -->
<div id="app">
<button :class="{button: isButton, 'large-button': isLarge, 'primary-button': isPrimary}">美女與野獸</button>
</div>
// JavaScript
let app = new Vue({
el: '#app',
data: {
isButton: true,
isLarge: true,
isPrimary: true
}
})
效果如下：
效果和前面的一樣，把對應的類名添加到了 button 元素上。這種方法還有其強大之處，我們可以動態的改變 button 的類名。打開瀏覽器開發者工具，修改 data 中對應的屬性值：
大家可能發現了，我們 data 中對應的屬性值都是 真假值 。你是否想起了前面學的 v-model 指令，這樣我們可以通過 v-model 來實現類似的雙向綁定，控制元素類名。
默認效果，我們三個類名都有了，對應的三個 checkbox 也是選中的，那是因為 data 中對應的三個屬性值都為 true 。你可以點擊每個 checkbox ，你可以看到 v-model 改變了 data 中的屬性的值，同樣也改變了 class 的值。
上面的示例，我們將三個值分開來寫，其實為了方便，你可以把這三個值放到一個對象中：
<!-- Template -->
<button :class="classObject">美女與野獸</button>
// JavaScript
let app = new Vue({
el: '#app',
data: {
classObject: {
button: true,
'large-button': true,
'primary-button': true
}
}
})
對應的效果如下：
我們也可以在這裏綁定返回對象的 計算屬性 。這是一個常用且強大的模式：
<!-- Template -->
<div id="app">
<button :class="classObject">美女與野獸</button>
</div>
// JavaScript
let app = new Vue({
el: '#app',
data: {
isButton: true,
isLarge: null,
isPrimary: true
},
computed: {
classObject: function () {
return {
button: this.isButton,
'large-button': this.isLarge != false,
'primary-button': !this.isPrimary
}
}
}
})
效果如下：
數組語法
我們可以把一個數組傳給 v-bind:class ，以應用一個 class 列表：
<!-- Template -->
<div id="app">
<button :class="[classA, classB, classC]">美女與野獸</button>
</div>
// JavaScript
let app = new Vue({
el: '#app',
data: {
classA: 'button',
classB: 'large-button',
classC: 'primary-button'
}
})
也可以根據條件切換列表中的 class ，可以使用三元表達方式。比如當 toggleClass 為 true 時添加 large-button ，反之為 false 時添加 primary-button 。這個示例我們配合 v-model 一起來寫：
ES6擴展語法
最前面我們看了表達式的方式來給 button 添加類名。如果使用ES6的特性，我們可以使用雙撇號來替代 + 運算，比如：
<div id="app">
<button :class="`${classA} ${classB} ${classC}`">美女與野獸</button>
</div>
// JavaScript
let app = new Vue({
el: '#app',
data: {
classA: 'button',
classB: 'large-button',
classC: 'primary-button'
}
})
得到的效果是一樣的。
綁定內聯樣式
綁定內聯樣式和綁定類名方法有點類似。我們來看幾個常見的方式。
對象語法
v-bind:style 的對象語法十分直觀 —— 看著非常像CSS，其實它是一個JavaScript對象。 CSS屬性名需要用駝峰方式（camelCase）書寫或者配合引號的短橫分隔命名（kebab-case）：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接綁定到一個樣式對象通常更好，讓模松更清晰：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
同樣的，對象語法常常結合返回對象的計算屬性使用。除了對象的方式，還可以使用數組方式：
v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶前綴的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這會渲染數組中最後一個被瀏覽器支持的值。在這個例子中，如果瀏覽器支持不帶瀏覽器前綴的 Flexbox，那麽渲染結果會是 display: flex 。
另外在寫CSS屬性的時候，有些屬性需要添加特定的瀏覽器前綴。Vue比較靈活，會自動偵測並添加相應的前綴。
用在組件上
由於我們還沒有接觸過 Vue的組件 創建，接下來的內容你可以忽略。當然，如果你對Vue組件有一定的接觸，可以簡單的看看 v-bind 在組件上的運用。
當你在一個自定義組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋。
例如，如果你聲明了這個組件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然後在使用它的時候添加一些 class ：
<my-component class="baz boo"></my-component>
HTML 最終將被渲染成為：
<p class="foo bar baz boo">Hi</p>
同樣的適用於綁定 HTML class：
<my-component v-bind:class="{ active: isActive }"></my-component>
當 isActive 為 truthy 值 (譯者註：truthy 不是 true ， 參考這裏 ) 的時候，HTML 將被渲染成為：
<p class="foo bar active">Hi</p>
v-bind 修飾符
v-bind 和 v-model 有點類似，也具有修飾符特性：
-
.prop ：被用於綁定 DOM 屬性 ( property )。( 差別在哪裏？ )
-
.camel ：將 kebab-case 特性名轉換為 camelCase 。 (從 2.1.0 開始支持)
-
.sync ：語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器
總結
這篇文章介紹了Vue中的 v-bind 指令。通過 v-bind 指令可以很方便的給HTML元素綁定屬性。比如最常見的給元素綁定類名或者內聯樣式。而且具有多種方式給元素綁定屬性。比如說有條件的給元素綁定類名。
由於作者是Vue初學者，如果文章中有不對之處，還請各路大嬸拍正，如果你在這方面有更多的經驗或建議，歡迎在下面的評論中與我們一起分享。
大漠
常用昵稱“大漠”，W3CPlus創始人，目前就職於手淘。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專註對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國布道者。2014年出版《 圖解CSS3：核心技術與案例實戰 》。
Tags:
屬性 指定 quot 我們 元素 標簽
文章來源：
ads
ads
