now v-for traverses an array to render the corresponding data, but now there is a requirement to dynamically add the data of the first index to the class, change the style through the specified index, change the style uniformly, and do not achieve the desired effect
<div
class="real-time"
v-for="(item, index) in orderTrackInfo"
:key="index"
>
<span
:class="[orderTrackInfo.indexOf(1) ? "active-color" : "color-l" ]"
>
{{ item.Time | date("MM/DD HH:mm") }}
</span>
<div>{{ item.Title }}</div>
</div>
// css
.active-color {
color: -sharpfff;
background: -sharp328beb;
}
.color-l {
color: -sharpaaa;
background: -sharpeee;
}
the following is the effect shown in the above code