Vue.js Class與Style綁定

Class與Style綁定

對于數據綁定，一個常見的需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性，我們可以用 v-bind 來處理它們：只需要計算出表達式最終的字符串。

不過，字符串拼接麻煩又易錯，因此，在 v-bind 用于 class 和 style 時，Vue.js 專門增強了它。表達式的結果類型除了字符串以外，還可以是對象或數組。

綁定HTML Class

1、對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class

<div v-bind:class="{ active: isActive }"></div>

上面的語法表示 class active 的更新將取決于數據屬性 isActive 是否為真值

我們也可以在對象中傳入更多屬性，用來動態切換多個class。此外，v-bind:class 還可以與普通的 class 屬性共存

<div id="example" class="static" v-bind:class="{'orange':isRipe, 'pear':isNotRipe}"></div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            isRipe:true,
            isNotRipe:false
        }
    })
</script>

以上代碼渲染為：

當isRipe 和 isNotRipe變化時，class列表將相應地更新。例如，如果 isNotRipe變為true，那么 class 列表將渲染成“static orange pear”。（一般情況下，v-bind:class 綁定的對象中只有一個class會生效，這取決于用戶自己的設置）

注意：盡管可以用{{}}標簽綁定 class，比如 class = "`className`"，但是不推薦這種寫法和 v-bind:class 混用

我們也可以直接綁定數據中的一個對象，代碼如下：

<div id="example" v-bind:class="fruit"></div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            fruit:{
                'orange':true,
                'pear':false
            }
        }
    })
</script>

還可以在這里綁定一個返回對象的計算屬性，這是一種常用且強大的模式，看一段示例代碼：

<div id="example" v-bind:class="classObject"></div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data: {
            age: 4,
            member: 6000
        },
        computed:{
            classObject:function(){
                return {
                    'orange':this.age>3?true:false,
                    'large':this.member>1000?true:false
                }
            }
        }
    })
</script>

渲染為：

<div id="example" class="orange large"></div>

2、數組語法

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

<div id="example" v-bind:class="[activeClass, errorClass]"></div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })
</script>

渲染為：

如果想根據條件切換列表中的 class，則可以用三元表達式，代碼如下：

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始終添加 errorClass，但是只有在 isActive 為true 時添加 activeClass

不過，當有多個條件 class 時這樣寫有些繁瑣。在Vue.js 1.0.19及以后的版本中，可以在數組語法中使用對象語法。示例如下：

<div id="example" v-bind:class="[didiHandsome, {didiOrange: isRipe, didiPear: isNotRipe}]"></div>

3、With Components

如果把 class 屬性用在一個自定義組件上，這些 class 會被添加到組件的根元素上，根元素上已經存在的class將不會被覆蓋

看一段示例代碼：

<div id="example">
    <my-component class="foo boo"></my-component>
</div>


<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:'<p class="bar baz">Hi</p>'
    });
    new Vue({
        el:'#example'
    })
</script>

渲染為：

這個也同樣適用于綁定 class，看一段示例代碼：

<div id="example">
    <my-component v-bind:class="{'active':isActive}"></my-component>
</div>


<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:'<p class="bar baz">Hi</p>'
    });
    new Vue({
        el:'#example',
        data:{
            isActive:true
        }
    })
</script>

當 isActive 為true 時，代碼被渲染為：

綁定內聯樣式

1、對象語法

v-bind:style 的對象語法十分直觀——看著非常像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

<div id="example" v-bind:>Hello World!</div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            activeColor:'red',
            fontSize:30
        }
    })
</script>

頁面效果截圖：

通常直接綁定到一個樣式對象更好，讓模板更清晰，代碼示例如下：

<div id="example" v-bind:>Hello World!</div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            styleObject:{
                color:'red',
                fontSize:'30px'
            }
        }
    })
</script>

同樣的，對象語法常常結合返回對象的計算屬性使用，例如

<div id="example" v-bind:>Hello World!</div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            age:4,
            member:6000
        },
        computed:{
            styleObject:function(){
                return {
                    color: this.age > 3 ? 'orange' : 'green',
                    fontSize: this.member > 1000 ? '20px' : '10px'
                }
            }
        }
    })
</script>

2、數組語法

v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上：

<div v-bind:>

3、自動添加前綴

當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測并添加相應的前綴。

一般來說，瀏覽器私有前綴包括Firefox 的 -moz-，IE的 -ms-，Safari 和 Chrome 的 -webkit-，Opera的 -o-，但是Vue.js 只添加了前面三種前綴。這里需要注意一下