Vue封装五星好评

图标下载：

创建starXIng.vue

<template>
  <div class="statBox">
    <div v-for="(item, index) in starArr" :class="item" :key="index"></div>
  </div>
</template>

<script>
export default {
     
  props: {
     
    star: String,
  },
  computed: {
     
    starArr() {
     
      //星级评分
      var starClass = [];
      var onstar = Number(this.star);
      // 满星
      for (let i = 0; i < onstar; i++) {
     
        starClass.push("on_star");
      }
      //灰色星星
      while (starClass.length < 5) {
     
        starClass.push("off_star");
      }
      return starClass;
    },
  },
  data() {
     
    return {
     
      nostart: [1, 2, 3, 4, 5],
    };
  },
  watch: {
     },
  methods: {
     },
};
</script>

<style lang="scss" scoped>

.statBox{
     
    display: flex;
}
.on_star {
     
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
  margin-right: 40rpx;
  background: url('/stars_icon.png'); //高亮图标
  background-size: 100%;
}
.off_star {
     
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
   margin-right: 40rpx;
  background: url('/stars_none_icon.png');//灰色图标
  background-size: 100%;
}
</style>

使用
star表示高亮几颗星

 <statr-xing star="1"></statr-xing>

自行拓展吧!!!