如何改变v-for循环的中的某一个元素的样式

前两天做项目的时候我需要使用v-for来循环遍历出一个数组，方便后期获取数据。
但是在遍历出来的内容中，有一个元素的颜色是要求各不相同的，如果要实现单独对这个元素的样式进行改变，我们只需给它动态绑定一个类

<div class="fn-inline" :class="colorList[index]">{{ item.desc }}</div>

return内容

 colorList: [
        'color1',
        'color2',
        'color3',
        'color4',
        'color5',
        'color6',
        'color7',
        'color8',
        'color9',
        'color10'
      ]

style内容

.color1{
    color:#51C327;
  }
  .color2{
    color:#CDD100;
  }
  .color3{
    color:#FDA000;
  }
  .color4{
    color:#DC4631;
  }
  .color5{
    color:#9F7E63;
  }
  .color6{
    color:#AF26A9;
  }
  .color7{
    color:#CDD100;
  }
  .color8{
    color:#CDD100;
  }
  .color9{
    color:#CDD100;
  }
  .color10{
    color:#CDD100;
  }

这样就能实现我想要的效果啦
如下图