>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、本节说明 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`表示默认设置文字的颜色是蓝色的 ![](https://img.kancloud.cn/44/22/4422e91667c72dacb7dcbb9970a589e0_975x460.png) 有的时候我们会觉得在双引号里面去写css类有点怪异,并且IDE无提示。css类比较多的情况下,我们也可以把属性值对象绑定,通过自定义函数来返回 ![](https://img.kancloud.cn/76/86/7686ee271bab51f62fb2a394b2190821_890x580.png) ## 三、 效果 上面两种方式,实现的效果是一样的,蓝色的文字 ![](https://img.kancloud.cn/b5/a2/b5a2c39aa0e87c59b9dc082b3a3e6b9c_198x52.png) ## 四、 深入 那我们如何动态的切换颜色呢,这就需要我们自定义方法啦 * 视图代码,`@click`是`v-on:click`的简写形式,changeColor是我们自定义的切换颜色的方法 ``` <button @click="changeColor">换颜色</button> ``` * 视图模型(app),在methods代码段加入自定义函数changeColor ``` changeColor(){ this.isBlue = !this.isBlue this.isRed = !this.isRed } ``` 最终效果 ![](https://img.kancloud.cn/47/91/47910a9565f65540b48822eed2001752_260x88.gif)