vue入門：（class與style綁定）

• 對象語法
• 數組語法

 一、對象語法

1.1對象語法綁定HTML Class

語法：v-bind:class="{'className1':boolean1,'className2':boolean2}"

<style>
    div{
        width: 100px;
        height: 100px;
    }
    .class1{
        background-color: #ff0;
    }
    .class2{
        background-color:#f00;
    }
</style>

<div id="example" v-bind:class="{'class1':yellow,'class2':red}" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            yellow:true,
            red:false
        },
        methods:{
            changeColor(){
                this.yellow = !this.yellow;
                this.red = !this.red;
            }
        }
    });
</script>

當點擊div時，觸發changeColor方法，數據的值發生變化時，class行間屬性會被切換，下面時觸發效果：

當你看到v-bind:class="{'class1':yellow,'class2':red}"這句代碼是不是就想到了直接使用一個對象替代這個鍵值對的寫法，這當然是可以的：

<div id="example" v-bind:class="colorName" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            colorName:{
                class1:true,
                class2:false
            }
        },
        methods:{
            changeColor(){
                this.colorName.class1 = !this.colorName.class1;
                this.colorName.class2 = !this.colorName.class2;
            }
        }
    });
</script>

這兩種寫法前一種是空間復雜度大一點，后一種是時間復雜度大一點，怎么應用看具體需求吧。

1.2對象語法綁定HTML Style

語法：v-bind:style="{styleProp1:value1,styleProp2:value2}"

將樣式屬性名和屬性值以鍵值對的形式寫入對象，屬性名采用駝峰書寫模式。

<div id="example" v-bind:style="{width:widthVal,height:heightVal,backgroundColor:backColorVal}" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            widthVal:'100px',
            heightVal:'100px',
            backColorVal:'#ff0'
        },
        methods:{
            changeColor(){
                this.backColorVal = this.backColorVal == '#ff0' ? '#f00' : '#ff0';
            }
        }
    });
</script>

實現的效果與HTML Class對象語法實現的一樣，HTML Style對象語法表達式轉換成類名的方式就不展示了。

 二、數組語法

 2.1數組語法綁定HTML Class

語法：v-bind:class="[classNameKey1,classNameKey2]"

（樣式參考示例1.1的樣式）

<div id="example" v-bind:class="[class1,class2]" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            class1:'class1',
            class2:''
        },
        methods:{
            changeColor(){
                this.class1 = this.class1 == '' ? 'class1' : '';
                this.class2 = this.class2 == '' ? 'class2' : '';
            }
        }
    });
</script>

2.2數組語法實現HTML Style綁定

語法：v-bind:style="[styleObje1,styleObje2]"

<div id="example" v-bind:style="[didiFamily, styleColo]" v-on:click="changeColor" ref="example"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            didiFamily:{
                width:'100px',
                height:'100px'
            },
            styleColo:{
                backgroundColor:'#ff0'
            }
        },
        methods:{
            changeColor(){
                return this.styleColo.backgroundColor = this.styleColo.backgroundColor == '#ff0' ? '#f00' : '#ff0';
            }
        }
    });
</script>