v-bind 及 class 與 style 綁定

        DOM 元素常常會動態地綁定一些 class 類名或 style 樣式。 

1、瞭解 v-bind 指令

        v-bind 指令的主要用法是動態更新 HTML 元素上的屬性，可以使用 v-bind 指令綁定 class 和 style 。以下，示例：

<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://bingbinlee.com/img.pang'
            }
        })
    </script>

        連接的 href 屬性和圖片的 src 屬性都被動態設置了，當數據變化時，就會從新渲染。

        在數據綁定中，最多見的兩個需求就是元素的樣式名稱 class 和內聯樣式 style 的動態綁定，它們也是 HTML 屬性，所以可使用 v-bind 指令。只須要用 v-bind 計算出表達式最終的字符串也能夠，不過有時候表達式的邏輯較爲複雜，使用字符串拼接方法較難閱讀和維護，因此 Vue.js 加強了對 class 和 sytle 的綁定。

2、綁定 class 的幾種方式

2.1 對象語法

        給 v-bind:class 設置一個對象，能夠動態地切換 class ，例如：

<div id="app">
        <div :class="{ 'active': isActive }"></div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: true
            }
        })
    </script>

        上面示例中，類名 active 依賴於數據 isActive, 當其爲 true 時，div 會擁有類名 Active，爲 false 時則沒有，因此上例最終渲染完的結果是：

<div class="active"></div>

        對象中也能夠傳入多個屬性，來動態切換 class 。另外，:class 能夠與普通 class 共存，例如：

<div id="app">
        <div class="static" :class="{ 'active': isActive, 'error': isError}"></div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isActive： true,
                isError: false
            }
        })
    </script>

        :class 內的表達式每項爲真時，對應的類名就會加載，上面渲染後的結果爲：

<div class="ststic active"></div>

        當數據 isActive 或 isError 變化時，對應的 class 類名也會更新。好比當 isError 爲 ture 時，渲染後的結果爲：

<div class="static active error"></div>

        當 :class 的表達式過長或邏輯複雜時，還能夠綁定一個計算屬性，這是一種很友好和常見的用法，通常當條件多於兩個時，均可以使用 data 或 computed ，例如使用計算屬性：

<div id="app">
        <div :class="classes"></div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classes: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-fail': this.error && this.error.type === 'fail'
                    }
                }
            }
        })
    </script>

        除了計算屬性，也能夠直接綁定一個 Object 類型得數據，或者使用相似計算屬性的 methods 。

2.2 數組語法

        當須要應用多個 class 時，可使用數組語法，給 :class 綁定一個數組，應用一個 class 列表：

<div id="app">
        <div :class="[activeCls, errorCls]"></div>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                activeCls: 'active',
                errorCls: 'error'
            }
        })
    </script>

        渲染後的結果爲：

<div class="active error"></div>

        也可使用三元表達式來根據條件切換 class ，例以下面的示例：

<div id="app">
        <div :class="[isActive ? activeCls : '', errorCls]"></div>
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                isActive: true,
                activeCls: 'active',
                errorCls: 'error'
            }
        })
    </script>

        樣式 error 會始終應用，當數據 isActive 爲真時，樣式 active 纔會被應用。class 有多個條件時，這樣寫較爲煩瑣，能夠在數組語法中使用對象語法：

<div id="app">
        <div :class="[{ 'active': isActive}, errorCls]"></div>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                isActive: ture,
                errorCls: 'error'
            }
        })
    </script>

        固然，與對象語法同樣，也可使用 data、computed 和 methods 三種方法，以計算屬性爲例：

<div id="app">
        <button :class="classes"></button>
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                size: 'large',
                disabled: true
            },
            computed: {
                classes: function () {
                    return [
                        'btn',
                        {
                            ['btn-' + this.size]: this.size !== '',
                            ['btn-disabled']: this.disabled
                        }
                    ];
                }
            }
        })
    </script>

        示例中的樣式 btn 會始終應用，當數據 size 不爲空時，會應用樣式前綴 btn- ，後加 size 的值；當數據 disabled 爲真時，會應用樣式 btn-disabled，因此該示例最終渲染的結果爲：

<button class="btn btn-large btn-disabled"></button>

        使用計算屬性給元素動態設置類名，在業務中常常用到，尤爲是在寫複用的組件時，因此在開發過程當中，若是表達式較長或邏輯複雜，應該儘量地優先使用計算屬性。

3、在組件上使用

        若是直接在組件上使用 class 或 :class ，樣式規則會直接應用到這個組件的根元素上，例如聲明一個簡單的組件：

Vue.component('my-component', {
        template: '<p class="article">我是個文本</p>'
    });

        而後在調用這個組件時，應用上面的對象語法或數組語法給組件綁定 class ，以對象語法爲例：

<div id="app">
        <my-component :class="{ 'active': isActive }"></my-component>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                isActive: true
            }
        })
    </script>

        最終組件渲染後的結果爲：

<p class="article active">我是個文本</p>

        這種用法僅適用於自定義組件的最外層是一個根元素，不然會無效，當不知足這種條件或須要給具體的子元素設置類名時，應當使用組件的 props 來傳遞（這些用法一樣適用於綁定內聯樣式 style 的內容）。

4、綁定內聯樣式

        使用 v-bind:style （即 :style）能夠給元素綁定內聯樣式，方法與 :class 相似，也有對象語法和數組語法，看起來很像直接在元素上寫 CSS ：

<div id="app">
        <div :style="{ 'color': color, 'fontSize': fontSize + 'px'}">我是個文本</div>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                color: 'red',
                fontSize: 14
            }
        })
    </script>

        CSS 屬性名稱使用駝峯命名 （camelCase）或短橫分割命名（kebab-case），渲染後的結果爲：

<div style="color: red; font-size: 14px;">紅色文本</div>

        大多數狀況下，直接寫一長串的樣式不便於閱讀和維護，因此通常寫在 data 或 computed 裏，以 data 爲例改寫下面的示例：

<div id="app">
        <div :style="styles">我是一個紅色的文本</div>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                styles: {
                    color: 'red',
                    fontSize: 14 + 'px'
                }
            }
        })
    </script>

        應用多個樣式對象時，可使用數組語法：

<div :style="[styleA, styleB]">文本</div>

        在實際業務中，:style 的數組語法並不經常使用，由於每每能夠寫在一個對象裏面；而較爲經常使用的應當時計算屬性。

        另外，使用 :style 時，Vue.js 會自動給特殊的 CSS 屬性名稱增長前綴，好比 transform 。