vue---v-for为不同item设置不同的样式

要求：为每一条数据设置不同的样式，以背景颜色为例，希望每一个类别的背景颜色不一样。

关键：

<template>
  <div>  
    <ul>
      <li :class="'bgColor'+(index+1)" v-for="(item,index) in tagsList" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tagsList: [
        { id: 1, name: "动物" },
        { id: 2, name: "水果" },
        { id: 3, name: "玩具" },
        { id: 4, name: "蔬菜" }
      ],
    };
  }
};
</script>
<style lang="less">
ul {
  li {
    padding: 4px 8px;
    background-color: bisque;
    margin-right: 20px;
    font-size: 20px;
    list-style: none;
    display: inline-table;
  }
  .bgColor {
    &1 {
      background-color: #fab1a0;
    }
    &2 {
      background-color: #00cec9;
    }
    &3 {
      background-color: #fdcb6e;
    }
    &4 {
      background-color: #ff7675;
    }
  }
}
</style>