Vue 2.0學習筆記：v-bind

通過前面的學習，咱們知道v-on能夠實現事件綁定，v-model能夠實現雙向數據綁定。在Vue中除了這兩個指令，還有一個v-bind指令。它能夠往元素的屬性中綁定數據，也能夠動態地根據數據爲元素綁定不一樣的樣式。簡單說，v-bind是用來綁定HTML屬性。

JavaScript給HTML標籤指定屬性

HTML不一樣的標籤具備不一樣的屬性。咱們在寫標籤的時候通常會根據不一樣的標籤指定不一樣的屬性，好比img標籤，咱們會指定src和alt屬性。

<img src="../images/logo.png" alt="w3cplus" /> 

但咱們不少時候須要動態的給HTML標籤動態指定屬性的值。好比，咱們這個img的src和alt是動態數據data（也就是服務端傳過來的）。咱們須要藉助JavaScript來實現。在JavaScript中，咱們有三個方法用來控制元素的屬性：

• Element.getAttribute()：獲取元素上一個指定的屬性值。若是指定的屬性不存在，則返回null或""（空字符串）
• Element.setAttribute()：指定元素上的一個屬性值。若是屬性已經存在，則更新該值；不然將添加一個新的屬性用指定的名稱和值
• Element.removeAttribute()：從指定的元素中刪除一個屬性

一樣拿img標籤的src和alt來舉例。好比咱們有一個默認的圖片元素：

 1 <div class="wrapper">
 2     <img src="//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg" alt="美女與野獸">
 3 </div>
 4 <div class="action">
 5     <button id="btn">美女與野獸</button>
 6 </div>
 7 
 8 // JavaScript
 9 let data = { 10  imgInfo: { 11         imgUrl: '//www.w3cplus.com/sites/default/files/blogs/2017/1709/yuesou.jpg', 12         alt: '野獸'
13  } 14 } 15 
16 const imgEle = document.querySelector('.figure') 17 const btn = document.getElementById('btn') 18 
19 btn.addEventListener('click', () => { 20     imgEle.setAttribute('src', data.imgInfo.imgUrl) 21     imgEle.setAttribute('alt', data.imgInfo.alt) 22 }, false)

View Code

 

點擊按鈕就能夠把「美女」切換成「野獸」。以下圖所示：

在Vue中，咱們採用今天要學習的v-bind指令，事情會變得更容易的多。那麼接下來的內容中，咱們會看到如何用v-bind來給HTML的元素綁定屬性。

v-bind用法

前面也提到過了，v-bind是Vue的一個指令，主要功能是動態地綁定一個或多個特性，或一個組件props到表達式。常見的使用方式有：

 1 <!-- 綁定一個屬性 -->
 2 <img v-bind:src="imgUrl" />
 3 
 4 <!-- 縮寫 -->
 5 <img :src="imgUrl" />
 6 
 7 <!-- 內聯字符串拼接 -->
 8 <img :src="'../images/' + fileName" />
 9 
10 <!-- class 綁定 -->
11 <div :class="{ red: isRed}"></div>
12 <div :class="[classA, classB]"></div>
13 <div :class="[classA, {classB: isB, classC: isC}]"></div>
14 
15 <!-- style綁定 -->
16 <div :style="{fontSize: size + 'px'}"></div>
17 <div :style="[styleObjectA, styleObjectB]"></div>
18 
19 <!-- 綁定一個有屬性的對象 -->
20 <div v-bind="{id:someProp, 'other-attr': otherProp}"></div>
21 
22 <!-- 經過prop綁定， prop必須在my-component中聲明 -->
23 <my-component :prop="someThing"></my-component>
24 
25 <!-- 經過 $props 將父組件的props 一塊兒傳遞給子組件 -->
26 <child-component v-bind="$props"></child-component>
27 
28 <!-- Xlink -->
29 <svg><a :xlink:special="foo"></a></svg>

View Code

 

回到咱們最初的示例中來，看看在Vue中怎麼經過v-bind給img元素綁定相應的屬性。

 1 <!-- Template -->
 2 <div id="app">
 3     <img :src="imgUrl" v-bind:alt="imgAlt" :class="{figure: className}" />
 4 </div>
 5 
 6 // JavaScript
 7 let app = new Vue({  8     el: '#app',  9  data () { 10         return { 11             imgUrl: '//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg', 12             imgAlt: '美女', 13             className: true
14  } 15  } 16 })

View Code

 

這個時候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中多個屬性，好比：

 1 <div id="app">
 2     <button :class="classA + ' ' + classB">美女與野獸</button>
 3 </div>
 4 
 5 // JavaScript
 6 let app = new Vue({  7     el: '#app',  8  data: {  9         classA: 'button', 10         classB: 'large-button', 11         classC: 'primary-button'
12  } 13 })

 

能夠看到，button和large-button兩個類名以及對應的樣式已經綁定到了<button>元素上：

執行函數

除了在v-bind中使用表達式以外，還可使用執行函數，好比下面這個示例：

 1 <!-- Template -->
 2 <div id="app">
 3     <button :class="getClass()">美女與野獸</button>
 4 </div>
 5 
 6 // JavaScript
 7 let app = new Vue({  8     el: '#app',  9  data: { 10  getClass: function () { 11             return `button large-button primary-button` 12  } 13  } 14 })

 

一樣的，對應的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 } })

View Code

 

效果和前面的同樣，把對應的類名添加到了button元素上。這種方法還有其強大之處，咱們能夠動態的改變button的類名。打開瀏覽器開發者工具，修改data中對應的屬性值：

你們可能發現了，咱們data中對應的屬性值都是真假值。你是否想起了前面學的v-model指令，這樣咱們能夠經過v-model來實現相似的雙向綁定，控制元素類名。

默認效果，咱們三個類名都有了，對應的三個checkbox也是選中的，那是由於data中對應的三個屬性值都爲true。你能夠點擊每一個checkbox，你能夠看到v-model改變了data中的屬性的值，一樣也改變了class的值。

上面的示例，咱們將三個值分開來寫，其實爲了方便，你能夠把這三個值放到一個對象中：

 1 <!-- Template -->
 2 <button :class="classObject">美女與野獸</button>
 3 
 4 // JavaScript
 5 let app = new Vue({  6     el: '#app',  7  data: {  8  classObject: {  9             button: true, 10             'large-button': true, 11             'primary-button': true
12  } 13  } 14 })

 

咱們也能夠在這裏綁定返回對象的計算屬性。這是一個經常使用且強大的模式：

 1 <!-- Template -->
 2 <div id="app">
 3     <button :class="classObject">美女與野獸</button>
 4 </div>
 5 
 6 // JavaScript
 7 let app = new Vue({  8     el: '#app',  9  data: { 10         isButton: true, 11         isLarge: null, 12         isPrimary: true
13  }, 14  computed: { 15  classObject: function () { 16             return { 17                 button: this.isButton, 18                 'large-button': this.isLarge  != false, 19                 'primary-button': !this.isPrimary 20  } 21  } 22  } 23 })

 

數組語法

咱們能夠把一個數組傳給v-bind:class，以應用一個class列表：

 1 <!-- Template -->
 2 <div id="app">
 3     <button :class="[classA, classB, classC]">美女與野獸</button>
 4 </div>
 5 
 6 // JavaScript
 7 let app = new Vue({  8     el: '#app',  9  data: { 10         classA: 'button', 11         classB: 'large-button', 12         classC: 'primary-button'
13  } 14 })

 

也能夠根據條件切換列表中的class，可使用三元表達方式。好比當toggleClass爲true時添加large-button，反之爲false時添加primary-button。

ES6擴展語法

最前面咱們看了表達式的方式來給button添加類名。若是使用ES6的特性，咱們可使用雙撇號來替代+運算，好比：

 1 <div id="app">
 2     <button :class="`${classA} ${classB} ${classC}`">美女與野獸</button>
 3 </div>
 4 
 5 // JavaScript
 6 let app = new Vue({  7     el: '#app',  8  data: {  9         classA: 'button', 10         classB: 'large-button', 11         classC: 'primary-button'
12  } 13 })

 

獲得的效果是同樣的。

綁定內聯樣式

綁定內聯樣式和綁定類名方法有點相似。咱們來看幾個常見的方式。

對象語法

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元素綁定屬性。好比最多見的給元素綁定類名或者內聯樣式。並且具備多種方式給元素綁定屬性。好比說有條件的給元素綁定類名。

原文: https://www.w3cplus.com/vue/v-bind.html © w3cplus.com