为什么我们需要动态的绑定class？因为很多时候，我们希望动态的切换class。
我们想实现这样的功能：
一行文字，一个按钮，我们希望点击一下按钮，字体显示红色，再点击一下按钮，字体显示为黑色。
这个时候使用v-bind动态绑定class实现起来会非常的方便，思想：当点击按钮时，class生效，再点击一下按钮，让class失效。
实现代码为：
<style> .active{ color: red; } </style> <div id="app"> <h2 v-bind:class="{active:isActive}">{{message}}</h2> <button v-on:click="change">点击切换样式</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isActive:true }, methods:{ change(){ this.isActive=!this.isActive } } }) </script>v-bind:class="{active:isActive}"。让v-bind绑定类active，active可以让文字显示红色；
isActive:true。在data中定义isActive，初始值为true，表示类active生效；
v-on:click=“change”。为按钮绑定点击事件，当点击时，isActive修改值，取反；
v-bind的语法格式为：（其中value1、value2都可以通过定义变量来动态更改）
v-bind:class="{key1: value1, key2: value2}