vue中的樣式繫結

樣式繫結

樣式繫結有class繫結和style繫結，這裡我們分別說說

class繫結

class樣式繫結與有兩種語法：物件語法（v-bind:class=''）、陣列語法（v-bind:class='[activeclass]'）。

物件繫結

首先我們需要將我們需要的類寫出來，再通過v-bind指令進行繫結，物件中的鍵值對，鍵名代表要新增的類，值表示是否實現，物件中值的值只有true和false；為false時，這個class將不會被應用。

同樣的我們也可以通過方法改變資料中的值，從而實現樣式的該改變。

陣列繫結

陣列繫結同樣需要將類寫出來，不同於物件用法的是，陣列繫結是直接用的資料內的值，它會將所要的類在資料中申明，在應用到元素中，同樣的，我們爺可以通過方法改變資料的值達到類切換的效果。

物件陣列的結合用法

在元素中利用陣列用法，然後在陣列中新增物件，在某些時候，結合用法會顯得更加方便

物件和陣列的簡寫方式

我們直接通過在資料中利用乙個變數寫上所有想要的資料，再利用繫結事件將其繫結再元素上

預設class

在碰到有類不是通過vue資料新增的時候，在執行顯示頁面時，預設類會和資料中新增的類結合到一起。

style繫結

style繫結（v-bind:style='樣式'）同class繫結一樣，有陣列語法和物件語法，不同的是，style繫結的是直接新增樣式，即物件繫結就是直接書寫樣式，陣列繫結就相當於是在資料中將類寫好，直接新增上去，並且只新增乙個資料變數時，不需要陣列語法，直接將變數引用就可以了