<style scoped>
.star {
    width: 17px;
height: 18px;
margin-right: 7px;
}
</style>
<template>
    <div>
        <img  v-for="item in starValue" :key="item"
            class="star"
            :src="require(`../../assets/img/star-fill.png`)"
          /><img v-if="isHalf"
            class="star"
            :src="require(`../../assets/img/star-half.png`)"
          /><img v-for="item in residue" :key="item"
            class="star"
            :src="require(`../../assets/img/star-none.png`)"
          />
    </div>
</template>
<script>
export default {
    props: {
        value: {
            default: 5
        }
    },
    data() {
        return {
            starValue: 5,
            isHalf: false,
            residue: 0
        }
    },
    created() {
        this.starValue = Math.floor(this.value)
        this.isHalf = this.starValue !== this.value
        this.residue = 5 - Math.ceil(this.value)
    }
}
</script>
