vue 遍历的汉字显示不同的颜色

<template>
  <div>
    <div class="stars">
      <span
        v-for="(star, index) in stars"
        :key="index"
        :class="starClass(index)"
        >33
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stars: [0, 3, 1], //数字代表不同的颜色
    };
  },
  methods: {
    starClass(index) {
      let classes = {
        "star-full": this.stars[index] === 3,
        "star-pass": this.stars[index] === 2,
        "star-fail": this.stars[index] === 1,
      };
      return classes;
    },
  },
};
</script>

<style>
.stars {
  font-size: 1.5em;
}
.star-full {
  color: #ffc107;
}
.star-pass {
  color: #4caf50;
}
.star-fail {
  color: #f44336;
}
</style>

效果