根据后端所给数据在页面相应展示星星数量

实现展示的效果图：

我这边写成组件可以参考一下：

用法 ：<star :value="60"></star>

<template>
  <div class="star_box">
    <div class="star_item" v-for="index in 5" :key="index + 'star'">
       <!-- 执行starIndex方法 -->
      <img :src="imagePath[starIndex(index)].path" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number || String,
      default: "99",
    },
  },
  data() {
    return {
      // 这个命名对应🌟 0就是空🌟 5就是半颗 8就是多半颗 10就是满星
      imagePath: [
        {
          path: "/image/0.png",
        },
        {
          path: "/image/05.png",
        },
        {
          path: "/image/08.png",
        },
        {
          path: "/image/10.png",
        },
      ],
    };
  },
  methods: {
    starIndex(index) {
      var value = this.value;
      // 达到条件让当前下标的🌟亮起
      switch (index) {
        case 1:
          return value >= 60 ? 3 : 0;
        case 2:
          return value >= 60 ? 3 : 0;
        case 3:
          return value >= 60 ? 3 : 0;
        case 4:
          return value >= 80 ? 3 : value >= 70 ? 1 : 0;
        case 5:
          return value > 95 ? 3 : value > 90 ? 2 : value > 80 ? 1 : 0;
      }
    },
  },
};
</script>

<style lang="scss">
.star_box {
  /* 继承父盒子的宽度 */
  width: 100%;
  /* 布局方式可以随意更改 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  .star_item {
    /* 这里设置图片大小 */
    > img {
      width: 100%;
    }
  }
}
</style>

提供图片：