Vue数字高亮用于排名

<el-menu default-active="1-articleTopFirstId"  unique-opened>
  <el-menu-item
      v-for="(article, index) in sortedArticles"
      :key="article.id"
      :index="'1-' + article.id"
      style="font-weight: bold;text-overflow: ellipsis;overflow: hidden; white-space: nowrap;font-size: 15px"
  >
    <span :class="getClassForIndex(index)">{{ index + 1 }}</span>
    <span>{{ article.title }}</span>
  </el-menu-item>
</el-menu>

classForIndex: {
  0: 'first-index',
  1: 'second-index',
  2: 'third-index',
  3: 'fourth-index',
  4: 'fifth-index'
}

getClassForIndex(index) {
  // 返回基于排名的类名，如果没有找到特定的排名，则返回空字符串
  return this.classForIndex[index] || '';
},

.first-index{
  background: linear-gradient(180deg,#f64242 20%,rgba(246,66,66,.4) 80%);
  color: transparent;
  -webkit-background-clip: text;
  font-weight: 1000;
  min-width: 18px;
  line-height: 22px;
  margin: 0 .92rem 0 0;
  text-align: left;
  font-size: 20px;
}

.second-index{
  font-weight: 800;
  min-width: 18px;
  line-height: 22px;
  margin: 0 .92rem 0 0;
  font-family: Archivo;
  text-align: left;
  background: linear-gradient(180deg,#ff7426 20%,rgba(255,116,38,.4) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
}

.third-index{
  font-weight: 800;
  min-width: 18px;
  line-height: 22px;
  margin: 0 .92rem 0 0;
  font-family: Archivo;
  text-align: left;
  background: linear-gradient(180deg,#ffac0c 20%,rgba(255,172,12,.4) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
}
.fourth-index{
  font-weight: 800;
  min-width: 18px;
  line-height: 22px;
  margin: 0 .92rem 0 0;
  font-family: Archivo;
  text-align: left;
  font-size: 20px;
}

.fifth-index{
  font-weight: 800;
  min-width: 18px;
  line-height: 22px;
  margin: 0 .92rem 0 0;
  font-family: Archivo;
  text-align: left;
  font-size: 20px;
}