vue通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的class名

<div
      v-for="item in contractPartyBList"
      :key="item.itemKey"
      @click="dian(item.itemKey)"
      :class="gernerateClass(item.itemKey)"
    >
      <div class="bee-name">
        {{ item.itemName }}
        <div v-if="item.itemKey == 1" style="padding-top: 5px">
          Hubei little bee
        </div>
        <div v-else-if="item.itemKey == 2" style="padding-top: 5px">
          Wheat sugar linggong
        </div>
        <div v-else-if="item.itemKey == 3" style="padding-top: 5px">
          Hunan Jinbai
        </div>
      </div>
      <img
        v-if="item.itemKey == 1"
        width="60px"
        height="60px"
        style="margin-left: 15px"
        src="../../assets/images/gongsia.png"
        alt=""
      />
      <img
        v-else-if="item.itemKey == 2"
        width="60px"
        style="margin-left: 25px"
        height="60px"
        src="../../assets/images/gongsis.png"
        alt=""
      />
      <img
        v-else-if="item.itemKey == 3"
        width="60px"
        height="60px"
        src="../../assets/images/gongsi.png"
        alt=""
      />
 </div>

<script>

export default {
  data() {
    return {
      
    }
  },
  methods: {
     // 动态添加样式
    gernerateClass(index) {
      return 'subject_sign' + index;
    },
    // 加上这个方法就可以为每个div添加一个id 为subject_sign1,subject_sign2,
    // subject_sign3................
  }
};
</script>

<style lang="scss" scoped>
.subject_sign1 {
  width: 90%;
  height: 90px;
  background: linear-gradient(270deg, #ffda51 0%, rgba(255, 153, 0, 0.7) 100%);
  border-radius: 16px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.subject_sign2 {
  width: 90%;
  height: 90px;
  background: linear-gradient(270deg, #a6dffe 0%, #56b6f3 100%);
  border-radius: 16px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.subject_sign3 {
  width: 90%;
  height: 90px;
  background: linear-gradient(270deg, #f4b4d5 0%, #ed83b9 100%);
  border-radius: 16px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>