How does js dynamically add styles based on the specified index?

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
clipboard.png


clipboard.png

Mar.31,2022

:class="[index == 0 ? 'active-color' : 'color-l' ]"

data(){
       return {
           active: 0
       }
}
:class="[index >= active ? 'active-color' : 'color-l' ]"
Menu