v-for中动态绑定样式


问题描述:

原有代码是多个li标签,其中第一个li标签中的字体为红色,其他为默认样式,我们改为v-for后所有的li标签都延续了原来第一个li标签的样式,怎么才能在使用v-for的同时,动态绑定样式呢?如图:

我么在li中使用了v-for,在下一级的a标签中,我们动态绑定一个class并且传入一个数组floorCss

然后我们在data中对该数组进行定义,元素floorCss1在数组中的索引值为0

所以我们修改css代码,即可实现v-for遍历后第一个li标签的字体为红色

当然,如果需要对后面的li标签样式也进行动态绑定,我们在数组中多加几个元素即可,floorCss:["floorCss1","floorCss2","floorCss3",……],然后分别编写"floorCss2","floorCss3",……的样式即可