>本节讲解的内容对前面的章节具有依赖性，如果看起来有困难，请先看本系列前面的章节 ## 一、本节说明 v-bind绑定元素除了上一节那种直接进行单个属性值绑定，还可以传入对象和数组。如：本节我们讲解使用对象语法的方式对class属性进行绑定。 * 我们先来看看，传统的html的css类引用语法 ``` <h2 class="css类名1 css类名2">html传统写法</h2> ``` * v-bind对象语法，我们需要队css-class类名赋一个boolean值，来决定css类是否生效。 ``` <h2 v-bind:class="{css类名1: true|false, css类名2: true|false}">{{message}}</h2> ``` 初次看这种写法，实在是繁琐，没有我们直接在html标签上写class更加简单。但是`v-bind:class`语法的好处就在于，我们可以动态的改变布尔值，来切换样式。 * **问题：我们使用了v-bind:class,那么class属性还能不能用了？** 答：可以，完全不耽误，vue会帮你将二者合并 ``` <h2 v-bind:class="{css类名1: true|false, css类名2: true|false}" class="css类名3">{{message}}</h2> ``` 我们利用上面的语法，实现一个简单的需求：为文字增加颜色，并点击按钮实现颜色的切换。 ## 二、 怎么做 首先，定义两个css的类，blue和red是两个css的类名 ```css .blue { color: blue; } .red { color: red; } ``` 然后我们来实现视图模型，`isBlue=true`表示默认设置文字的颜色是蓝色的  有的时候我们会觉得在双引号里面去写css类有点怪异，并且IDE无提示。css类比较多的情况下，我们也可以把属性值对象绑定，通过自定义函数来返回  ## 三、 效果 上面两种方式，实现的效果是一样的，蓝色的文字  ## 四、 深入 那我们如何动态的切换颜色呢，这就需要我们自定义方法啦 * 视图代码，`@click`是`v-on:click`的简写形式，changeColor是我们自定义的切换颜色的方法 ``` <button @click="changeColor">换颜色</button> ``` * 视图模型（app），在methods代码段加入自定义函数changeColor ``` changeColor(){ this.isBlue = !this.isBlue this.isRed = !this.isRed } ``` 最终效果