js如何根据指定的索引来动态添加样式?

Question

现在通过v-for遍历一个数组来渲染对应的数据, 但是现在有一个需求是把第一个索引的的数据动态添加类, 通过指定的索引来改样式, 样式统一改变, 没有达到预期的效果

<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: #fff;
  background: #328beb;
}
.color-l {
  color: #aaa;
  background: #eee;
}

以下是上面代码显示的效果

想要改成的效果

Answer 1

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

Answer 2

data(){
       return {
           active: 0
       }
}

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