Dynamically changing the style of label elements in a loop

Utilization cycle v-for Place tag elements on the page

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

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

Set different class styles

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

Define objects to bind indexes ( Or other items , It needs to be decided ) Relationship with class style

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

Modify the class style in the label

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

Effect view

Code instructions

explain : The code is written in vue In the frame
Key sentences :class="$$(colorEnum, [item], 'class')" // Add two. $ To dynamically match item and colorEnum Key in the corresponding object in class Value .