上一篇提到了 v-bind 的屬性綁定，今天就來提更多的屬性綁定的方法。

Class 與 Style 的綁定

我們先來看一個範例：

<!-- 這是HTML -->
<div id="app">
  <ul>
    <li><a href="#" class="active">連結一</a></li>
    <li><a href="#">連結二</a></li>
    <li><a href="#">連結三</a></li>
  </ul>
</div>

/* 這是CSS */
.active{
  color: red;
}

這時應該可以看到有三個連結，只有第一個是紅色的。
接下來我們利用 v-bind 的屬性綁定，給定一個 Class 的屬性叫 active，並且利用一個 data 的值 isAct 來當參數控制是否要被加上去，來看下面的範例：

<div id="app">
  <ul>
    <li><a href="#" :class="{'active': isAct}">連結一</a></li>
    <li><a href="#">連結二</a></li>
    <li><a href="#">連結三</a></li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
      isAct: true,
  }
})

首先，先看到 HTML 的內容，:class 的寫法就是 v-bind:class 的縮寫，而 active 會根據後方的 isAct 的值來決定是否要加上這個屬性，如果 isAct 的值是 true 的話，就會加上 active 的屬性，如果是 false 則否，這又跟之前所說的 Vue 的特性一樣，利用操作資料形態的方式來渲染頁面，而這個方式你會在越後面的章節越可以感受到他的強大！阿...說多了...

那麼，明天再見囉！