v-bind动态绑定class（对象语法与数组语法）

实际开发中，标签的class通常不会使用一个普通字符串写死，而是动态地给标签绑定class，有2种绑定语法：对象语法和数组语法。

对象语法（常用）

绑定方式是使用对象 v-bind:class="{ }"。

对象{ }由键值对构成，键是类名，值是布尔值。

如下所示：

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

对象语法的核心是：根据布尔值，判断要不要给标签加上某个类。要点在于，Boolean不仅可以通过data定义，还可以通过计算获得（比如使用===来计算true或false）。
使用 :class 代替 v-bind:class

// 演示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
     }
   }
 })

如果对象太长

可以把对象绑定成一个 methods，或使用 computed 计算属性。
即可以把这个对象写成一个方法，再把方法放到vue实例的methods属性里面。

methods

<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
<!--注意方法名getClasses()后面要加小括号-->
<!--btnClick不用加小括号的原因是：小括号被省掉了，其实调用函数都得加小括号-->

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive   //注意要加this
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine} //注意要加this
      }
    }
  })
</script>

总结

1. 固定的class，使用class=""，可能之后会删的，使用v-bind:class="{}"。
2. class=""和v-bind:class="{}"可以一起写，不冲突。