写了一年半小程序的我,近两天接手了一个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只能写一个哦,它属于标签的属性是不能重复的。
嗯,动态类名的写法大概就是这样,希望自己能记住,更希望能帮助到有需要的小伙伴们。