我是怎麼學會vue的08：v-bind動態綁定class（對象語法）

標籤的屬性能夠動態綁定（動態綁定的意思是不寫死），同理class（類）也能夠動態綁定。綁定方式是使用對象v-bind:class="{ }"。

對象由鍵值對構成，鍵是類名，值是布爾值。
以下所示：

<h2 v-bind:class="{類名1:boolean，類名2:boolean}">

使用場景：某標籤有時須要加class，有時不須要加class。

好比豆瓣電影頁面上，【最近熱門電影】右邊有幾個按鈕，點誰就把誰的顏色變成黑色，其它按鈕的字變成灰色。經過查看控制檯可知，點擊按鈕時給標籤添加了一個active類，並去掉別的按鈕的active類。

使用說明：

<h2 v-bind:class="{類名1:boolean，類名2:boolean}">

若是Boolean是true，則該類名會被添加到標籤上；若是是false，則該類名不會添加到標籤上。

演示1：給標籤動態綁定class

1. dom

   <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>

2. 數據

   data:{
      message:"你好",
      isActive:true,
      isLine:true
   }

這樣h2的兩個類都會顯示。

演示2：點一下按鈕 h2變紅，再點擊一下h2變黑

1. dom

   <div id="app">
    <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
    <button v-on:click="btnClick">按鈕</button>
   </div>

2. vue實例

   const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive
        }
      }
    })

建議：固定的class，使用 class=""，可能以後會刪的，使用 v-bind:class="{}"。

class=""和v-bind:class="{}"能夠一塊兒寫，不衝突。