動態切換 className

今天來介紹一點運用的範例，這是關於是件綁定跟屬性綁定的運用，如果對事件綁定 ( v-on ) 和屬性綁定 ( v-bind )還不熟悉的話，建議先看看我 Day3 及 Day4 的筆記唷！接下來讓我們直接看範例吧！

首先是 HTML 的內容，這邊的連結綁定了一個 class 是 active，而根據 isAct 的值來決定要不要將這個 class 加上去，另外按鈕的部份是直接將點擊後要執行的內容撰寫在裡面，也可以照之前的方法將事件撰寫在 methods 唷！

<!-- 這是HTML -->
<div id="app">
  <ul>
    <li><a href="#" :class="{'active': isAct}">這是連結</a></li>
  </ul>
  <button @click="isAct = !isAct">Toggle</button>
</div>

下面是 CSS 的內容，將字體顏色改為紅色而已唷！

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

這裡是 Vue 的應用程式的內容，isAct 的值預設是 false 所以在一開始並不會將 active 的屬性加上去。

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

接下來，請按按看 button 然後看看有什麼事情發生呢？

沒錯，字體的顏色變紅色了，因為當觸發點擊事件後 isAct 的值會變為 true ，這時 active 就會加上去囉！如果再點擊一次就會再將 isAct 變為 false，這就是 Vue 的核心概念，操作資料形態來渲染畫面，是不是又再次感受到 Vue 的強大了呢！

那麼，明天再見囉！