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' ]"
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e276-2bb6a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e276-2bb6a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?