Vue 中的樣式綁定

class的對象綁定

在開發的過程中，難免會給dom元素添加一些樣式，在 Vue 之中我們該如何綁定樣式呢？

現在有這樣一個想法，div被點擊一次，變成紅色，當再次被點擊時，恢復爲默認的顏色， 再點擊一次又變成紅色，想實現這樣的操作，如果憑藉以前對 Vue 的瞭解，好像是沒有辦法實現的，因爲我們很難想到數據如何和樣式進行綁定，Vue 是面向數據的一種編程方式，它不在是直接操作dom的編程方式了，所以呢，我們希望某些數據和樣式做一個關聯，數據一變，樣式就會變：

<div id="app">
    <div @click="handleDivClick"
        :class="{activated: isActivated}"
    >Hello world</div>
</div>
 let vm = new Vue({
    el: '#app',
    data: {
        isActivated:false,      //初始化時，這個值爲 false，所以 activated 肯定不會顯示
    },
    methods: {
        handleDivClick(){
            this.isActivated = true
        }
    }
 })

dom裏面只要有:的地方都是js的表達式，這裏面:class的意思是：Hello World這個div有個class值爲activated，它到底現不顯示，取決於data裏的isActivated這個變量是true還是false。這裏面初始化時，這個值爲false，所以activated肯定不會顯示。

當我點擊時，我希望將這個class展示出來，只需將isActivated值變成true，數據變化，頁面恰好通過:class和數據進行了綁定，所以isActivated值變爲true時，前面樣式的名字就會顯示在頁面上，通過這個功能就能實現，點擊一次變紅的效果。

那如何實現再點擊一次變成默認顏色呢？只需對這個值取反就行了。

handleDivClick(){
    this.isActivated = !this.isActivated    //這裏不讓它等於 true，而是對這個值進行取反
}

這就是藉助class和對象的形式實現數據和樣式的綁定，稱作爲class的對象綁定。

class的數組綁定

<div id="app">
    <div @click="handleDivClick"
        :class="[activated]"
    >Hello world</div>
</div>
 let vm = new Vue({
    el: '#app',
    data: {
        activated: ''   //初始化時，activated 爲空，所以 class 肯定是沒有值的。
    },
    methods: {
        handleDivClick(){
            this.activated = 'activated'
        }
    }
 })

:class那邊不在是一個對象了，取而代之我去寫一個數組，在數組裏面呢，我寫個activated，這個時候它指的是啥呢，應該這麼去讀Hello world這個div上的class，這個class是什麼呢？它顯示的是activated這個變量裏的內容。

初始化時，activated爲空，所以class肯定是沒有值的。通過這種寫法，我想把Hello world樣式置紅，應該怎麼寫呢？只需將activated這個變量由空字符串改變爲'activated'，就可以了，這樣div標籤上就會有個值爲activated的class。

那當我點擊第二下時，頁面會變成默認顏色嗎？很顯然是不會的，那要怎麼實現呢？只需做一個簡單的判斷

handleDivClick(){
    if(this.activated === 'activated'){
        this.activated = ''
    }else{
        this.activated = 'activated'
    }
}

上面這樣寫呢，代碼有點冗餘，可以用一個三元表達式來代替：

handleDivClick(){
    this.activated = this.activated === 'activated' ? '' : 'activated'
}

這裏是藉助class和數組相綁定，這個數組代表的是什麼呢？它代表的是一個變量，class上會顯示這個變量的內容。

既然class是一個數組，就可以定義多個變量，:class="[activated,activatedOne]"

通過這兩種方式，我們可以動態的向一個dom元素上，添加或刪除不同的class，從而實現頁面效果的一個變更，

style改變dom樣式

講到這裏，你是不是會想，我可以不可以通過改變style，來改變頁面的樣式，顯然是可以的。那如何來實現呢？

<div id="app">
    <div @click="handleDivClick" 
        :style="styleObj"
    >hello world</div>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        styleObj: {
            color: 'black'            //這種寫法是，div 有一個內聯樣式，內容是 color: black
        }
    },
    methods: {
        handleDivClick(){
            this.styleObj.color = this.styleObj.color === 'black ? 'red' : 'black'
        }
    }
})

內聯樣式有兩種定義方式，一種是和數組綁定，一種是和對象綁定。

:style="styleObj"看到:就會想到這是一個指令，後面的styleObj一定是一個js表達式，它對應的就是數據的一項。應該怎麼寫呢？

styleObj: {
    color: 'black'            //這種寫法是，div 有一個內聯樣式，內容是 color: black
}

這種寫法是，div有一個內聯樣式，內容是color: black。

當我點擊div時，要改變它顏色，該怎麼實現，其實是和上面改變class的方法是一樣的。

methods: {
    handleDivClick(){
        this.styleObj.color = this.styleObj.color === 'black ? 'red' : 'black'
    }
}

這是用style對象綁定，那要是用數組綁定呢？用數組綁定，可比對象簡單多了。

:style="[styleObj,{fontSize:'20px'}]"       //可以直接掛在對象，也可以用一個變量，對象中如果出現連字符的，用駝峯的形式表示，值要是字符串