因为v-bind可以直接实现 标签属性的值动态化，那么Class作为一个属性，那么：
<style> .active{ color:red; } </style>
<script src="js/vue.js"></script> <div id="app"> <h2 :class="active">不忘初心 ， 方得始终 。</h2> </div> <script > const app = new Vue({ el:"#app", data:{ active:"active" } }) </script>
如果我这样写的话 你可能会骂我 画蛇添足 多此一举 ***** s*****b*****当然 这是对的，但是他有一种另外形式来展现：
就是 Class属性 + v-bind 可以用 对象语法来写，对象语法 当然是一个{} ,里面是 键 - 值 ，值是boolean型的 如果是 true 的才会把值添加进去。
例：
<style> .red{ color:red; } .blue{ color: blue; } </style> </head> <body> <script src="js/vue.js"></script> <div id="app"> <!-- <h2 class="blue">不忘初心 ， 方得始终 。</h2> --> <h2 :class="{red:false,blue:true}">不忘初心 ， 方得始终 。</h2> </div> <script > const app = new Vue({ el:"#app", data:{ red:"red", blue:"blue", } }) </script>
上面的true 和 false 完全可以用变量代替 ，那么进阶的写法就应该这样写 【我们配个方法 然后实现 点击按钮变红色 再次点击变蓝色】：
<style> .red{ color:red; } .blue{ color: blue; } </style>
<script src="js/vue.js"></script> <div id="app"> <!-- <h2 class="blue">不忘初心 ， 方得始终 。</h2> --> <h2 :class="{red:boolean,blue:!boolean}">不忘初心 ， 方得始终 。</h2> <button @click="not">切换颜色</button> </div> <script > const app = new Vue({ el:"#app", data:{ red:"red", blue:"blue", boolean:true }, methods:{ not:function (){ this.boolean = !this.boolean; } } }) </script>
所以 非常的方便啊，
还有一个特点：
如果你有多个Class 其中有一个是v-bind绑定的 那么它们两个Class会合并起来 并不会吧 v-bind绑定的class 覆盖掉,例如：
<script src="js/vue.js"></script> <div id="app"> <!-- <h2 class="h2 red">不忘初心 ， 方得始终 。</h2>--> <h2 class="h2" :class="red">不忘初心 ， 方得始终 。</h2> </div> <script > const app = new Vue({ el:"#app", data:{ red:"red" } }) </script>
还有就是 如果你觉得 直接写对象语法太长的话 你就直接定义一个方法，然后写进去即可，v-bind也会自动解析这个函数的 ，函数中直接写 return {xxxx:teue,xxxx:false} 即可
例：
<style> .red{ color:red; } .blue{ color: blue; } </style> </head> <body> <script src="js/vue.js"></script> <div id="app"> <!-- 记得加括号 因为这是调用函数 不是事件调用的. --> <h2 :class="classs()">不忘初心 ， 方得始终 。</h2> </div> <script > const app = new Vue({ el:"#app", data:{ red:"red" }, methods:{ classs:function (){ return {red:true,blue:false}; } } }) </script>
，还有个数组语法 下一篇写