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>