摘要：
这篇文章在vue官方的文档的基础上对v-bind:class的用法进行了整理，文章中附带了几个完整的demo案例展示以便看官更好的理解文档。此篇文章中用到的vue是2.0版本，看官在阅读时需要注意版本的问题。

注意：文章中提到的vue是2.0版本，非1.0版本！

上次跟着Vue官网的文档写了两个例子，分别是：Vue.js中的v-if和v-show等判断条件失效的原因及解决方法、Vue.js实例之v-show用法，今天接着练手，药不能停！

今天来说下绑定class，这个里面还是大有文章的，写法不单一，主要还是看实际用途来决定写法。看官准备好了没有，下面开始进入正题。

一、“字符串”拼接写法

艺灵也不知道该如何表述，反正官方在文档中并没有对这种写法作出直接说明，但实际情况中可能会存在。下面就用实际的例子来一一演示吧。

1.1、html代码

<div id="app">
　<div v-bind:class="'box'+num">class类名:<mark>box{{num}}</mark></div>
</div>

注意上面黄色高亮部分，其实最终的class类名就是类似于：box1、box2、box3、boxn这种。为了让效果可见，下面把相关的js也写一下。

1.2、js代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app',
　　　data:{
　　　　num:2
　　　}
　});
</script>

此时再运行页面就可以看到效果了。效果配图： 戳我看demo

可能有些看官会有疑惑：“说了一堆，我还是不明白这种方法有什么用？！”

那艺灵问下看官：“看官使用vue是用来做什么？”

同样的道理，既然使用，肯定是有用途的。要不然，谁没事会吃饱了撑的弄些这玩意儿？使用jq还更简单节省代码，难道不是吗？所以说：不管是技巧还是方法，这些都是要配合实际场景来说的。

对于上面艺灵提供的案例，拿一个使用场景来说吧：“页面中有一个select菜单和一个盒子，我现在需要在切换的时候改变盒子的颜色。”这个时候我们就可以使用上面的方法，利用boxn来控制不同的颜色。配图：戳我看demo

二、对象语法

这个在官方的文档中有详细的说明，戳我看详情。艺灵大致整理了，方法如下：

2.1、html代码

<div id="app">
　<!--单个class-->
　<div v-bind:class="{ active: isActive }">{{"{ active: isActive }"}}</div>
　<!--多个class-->
　<div class="static" v-bind:class="{ active: isActive , 'text-danger': hasError}">{{"{ active: isActive , 'text-danger': hasError}"}}</div>
　<!--数据里的一个对象-->
　<div v-bind:class="classObject">{{classObject}}</div>
</div>

上面展示了3种不同的对象写法，下面附上相关的js代码。

2.2、js代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app',
　　　data:{
　　　　isActive: true,
　　　　hasError: false,
　　　　classObject: {
　　　　　active: true,
　　　　　'text-danger': true
　　　　}
　　　}
　});
</script>

最终的效果配图：戳我看demo

三、数组语法

想看官方权威文档的，可以戳我了解详情，下面的内容是艺灵整理的。

3.1、html代码

<div id="app">
　<!--整个数组-->
　<div v-bind:class="[activeClass, errorClass]">{{[activeClass, errorClass]}}</div>
　<!--数组+三元表达式-->
　<div v-bind:class="[isActive ? activeClass : '', errorClass]">{{[isActive ? activeClass : '', errorClass]}}</div>
　<!--对象+数组-->
　<div v-bind:class="[{ active: Active }, errorClass]">{{[{ active: Active }, errorClass]}}</div>
</div>

上面展示了3种不同的数组写法，下面附上相关的js代码。

3.2、js代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app',
　　　data:{
　　　　activeClass: 'active',
　　　　errorClass: 'text-danger',
　　　　isActive:true,
　　　　Active:true
　　　}
　});
</script>

最终的效果配图：戳我看demo

好了，写到这里时基本已把遇到的情况都写完了，剩下的就是看官如何应用到自己的项目中了。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2017-05-11/516.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。