Vue动态类名的实现

写了一年半小程序的我，近两天接手了一个H5的小项目，出于对vue的向往（啊，呸），决定捡一下vue的具体使用，那可真真是坑死我了。标签不一样、命令不一样、绑定数据不一样……总之用惯了小程序的语法，vue的啥啥都别扭，好嘞闲话不多说，今天我们来看一下vue的动态类名的绑定，记录一下方便日后查看。
Tips：vue设置动态属性是要用命令v-modal的哦，为了方便直接用半角冒号也可以啦，所以动态类名是主要这样写的“:class”。

无其他固定类名，只绑定动态类名

单个动态类名

<span :class="[2< 4 ? 'redColor' : '']">单次机油加注量：</span>

我给出的例子基本上都是三元运算符的，上面这个就是满足条件的就加上redColor这个类名。
特点：加单个动态类名要用“[]”这个括号包起来，类名也要用冒号包起来。

多个动态类名

<span :class="[item.IsShow==1?'':'itemBtnDis', item.IsSelect == 1?'itemBtnActive':'']" :index="index" :show="item.IsShow" v-for="(item,index) in getChoiceData.BrandList"></span>

上面这个是多个动态类名的，并且在循环中，根据循环数据满足或不满足某个条件的时候加上一个类名。
特点：跟单个冬天类名一样，类名与类名之前用都好隔开。

有其他固定类名，并添加动态类名

<span class="itemBtn" :class="[item.IsShow==1?'':'itemBtnDis', item.IsSelect == 1?'itemBtnActive':'']" :index="index" :show="item.IsShow" v-for="(item,index) in getChoiceData.BrandList"></span>

特点：有固定类名的，就还像之前那样写一个class赋上固定的类名，然后有动态类名的还想之前那样写在后面就可以了，但是要注意的是动态类名:class只能写一个哦，它属于标签的属性是不能重复的。

嗯，动态类名的写法大概就是这样，希望自己能记住，更希望能帮助到有需要的小伙伴们。