綁定class

v-bind:class可以與原本的class屬性共存，意思就是說原本HTML屬性上已經有定class了，後面可以再接v-bind:class來做動態綁定，原先的class不會被洗掉。
而綁定為class的資料可以是字串、物件、陣列。

字串

跟一般綁定字串的方法一樣，將fontColor綁定至class(以下省略一些code)：

<p :class="fontColor"></p>
˙
˙
˙
new Vue({
˙
    data:{
        fontColor : "red"
    }
});

render結果

<p class="red"></p>

物件

使用物件語法來動態切換class：

<div class="item" v-bind:class="{ active: isActive, error: hasError }"></div>

data: {
  isActive: true,  //出現
  hasError: false //不出現
}

在物件內active表示class的名稱，而isActive則用來決定active這個class的套用與否，若為true則套用，false就移除。因此render結果：

<div class="item" v-bind:class=active"></div>

若覺得全都寫在html裡很長很難辨識，也可以把它定義在data裡

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

data: {
  classObject: {
    active: true,
    error: false
  }
}

陣列

可將多個字串性質的class綁定至元素上

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

如在式子中除了有固定的class及動態(視狀態新增)的class的話，也可使用陣列來處理：

以三元表達式來判斷isActiveclass的有無

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

或上面提到的物件語法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

綁定style

寫inline style的方法跟class大同小異，一樣可以使用陣列及物件語法，但在給css屬性時要注意有些以-連結的詞，要改為駝峰式寫法，或者是使用單引號括起來。

物件

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

陣列

將多組樣式綁定到元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

data: {
  baseObject: {
    color: 'red',
    fontSize: '13px'
  }
  overridingStyles:{
    fontSize:'16px'
  }
}

以上v-bind綁定class與style筆記，下篇開始v-on