Vue2.5.x --- 星级评分显示（评分为10分制，带小数点）

效果预览：

所需素材：满星 和 未满星各一张

因为考虑到复用问题，所以将其写成组件，子组件代码如下

<template>
    <ul>
        <li v-for="(item, index) in starArr" :key="index">
            <img :src="[ item == 0 ? starIcon[0] : starIcon[1] ]" alt="星级评分">
        </li>
    </ul>
</template>

<script>
export default {
  data() {
    return {
        starArr: [],//星级评分所需处理的数组
        starIcon: [
            require("../../assets/img/star/star0.png"),
            require("../../assets/img/star/star1.png")
        ]//星级评分所需图片
    };
  },
  methods: {
    //处理评分所得对应星级
    starLevel(evaluate) {
      let starGrade = Math.round(evaluate / 2);//最高评分为10，星级只有5级 所以需要除2，再四舍五入获取评分数
      for (let i = 1; i <= 5; i++) {
        i <= starGrade ? this.starArr.push(1) : this.starArr.push(0)//如果i小于当前评分，则满星，否则为不满
      }
    }
  },
  mounted: function() {
    //若父组件有评分参数传递过来就立刻执行处理函数starLevel()
    if (this.grade) {
        this.starLevel(this.grade)
    } 
  },
  props: ['grade']//获取父组件传递过来的评分参数
};
</script>

<style scoped lang="scss">
ul {
  overflow: hidden;
}
li {
  width: calc(100% / 5);
  float: left;
  img {
    width: 100%;
  }
}
</style>

父组件调用

<template>
  <div>
    <star 
      v-for="grade in starGradeArr" 
      :key="grade" 
      :grade="grade"
    >
    </star>
  </div>
</template>

<script>
import star from "./components/publicModule/star";//引入星级评分组件

export default {
  data() {
    return {
      starGradeArr: [1,7,9,4],//星级评分数组
    }
  },
  components: {
    star
  }
};
</script>