在循环中动态改变标签元素的样式

利用循环v-for在页面上放置标签元素

<div v-for=(item,index) in list :key="index">{
   {item}}/div>

list=[
'red','yellow','green','blue'
]

设置不同的类样式

.red{
    color:red}
.yellow{
    color:yellow}
.green{
    color:green}
.blue{
    color:blue}

定义对象来绑定索引(或其他项，看需要决定)与类样式的关系

const colorEnum={
    
red:{
    class:'red'},
yellow:{
    class:'yellow'},
green:{
    class:'green'},
blue:{
    class:'blue'},
}

修改标签中类样式

<div v-for=(item,index) in list :key="index" :class="$$(colorEnum, [item], 'class')" >{
   {item}}/div>

效果查看

代码说明

说明:代码写在vue框架中
关键句 :class="$$(colorEnum, [item], 'class')" //加两个$来动态匹配item和colorEnum中相对应对象中的键class的值。