vue实现星级评分

1、vue实现星级评分

实现效果

实现代码

<template>
  <div>
      <ul class="ulcss">
          <li v-for="(item, index) in starList" :key="index">
              <img v-if="item.isShowStar" src="../assets/star.svg" alt="">
              <img v-else src="../assets/starEmpty.svg" alt="">
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    name: 'Star',
    data() {
        return {
            starList: [
                {
                    isShowStar: false
                },
                {
                    isShowStar: false
                },
                {
                    isShowStar: false
                },
                {
                    isShowStar: false
                },
                {
                    isShowStar: false
                }
            ]
        }
    },
    props: {
        starNum: {
            type: Number,
            default: 0
        }
    },
    mounted() {
        for (var i = 0; i < this.starNum; i++) {
            this.starList[i].isShowStar = true
        }
    }
}
</script>

<style lang="less" scoped>
.ulcss {
    display: flex;
    flex-direction: row;
    li {
        list-style: none;
        margin-right: 12px;
    }
}
</style>

这期简单做的星级评分的小组件分享出来，希望可以帮助到大家