proginn-frontend/components/credit/star.vue

<template>
  <section class="starComponent">
    <i class="star icon fill"
      v-for="(m,i) in calcNum.fill" :key="'fill' + i"></i>
    <i class="star icon half"
      v-for="(m,i) in calcNum.half" :key="'half' + i"></i>
    <i class="star icon none"  v-for="(m,i) in calcNum.none" :key="'none' + i">
    </i>
  </section>
</template>

<script>
  export default {
    props: {
      score: {
        type: [ Number, String ],
        default: 0
      }
    },
    computed: {
      calcNum() {
        let score = Number(this.score)
        let fill = [], half = [], none = []
        fill = Array.from({length: parseInt(score)})
        half = Array.from({length: Math.round(score) - Math.floor(score)})
        none = Array.from({length: 5 -  Math.round(score)})
        return {
          fill, half, none
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .starComponent {
    display: flex;
    .star {
      margin-left: 14px;
      &.icon {
        width: 21px;
        height: 21px;
        background-size: cover;
        background-repeat: no-repeat;

        &.fill {
          background-image: url("~@/assets/img/credit/starFill.png");
        }

        &.none {
          background-image: url("~@/assets/img/credit/starNone.png");
        }

        &.half {
          background-image: url("~@/assets/img/credit/starHalf.png");
        }
      }
    }
  }
</style>