我是怎么学会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="{}"能够一块儿写，不冲突。