整体思路就是把所有的亮星,半星以及暗星放进一个数组
一般的评分后台仅仅只是返回一个数据,需要我们处理这个数据之后在前台显示出来图形化的星星.
首先定义常量:

  //星星的最大长度
  const LENGTH = 5
  //亮星
  const CLS_ON = 'on'
  //半星
  const CLS_HALF = 'half'
  //暗星
  const CLS_OFF = 'off'

其次定义一个方法:

  itemClasses() {
    //定义放置结果的数组
    let result = []
    //定义得分(先乘2再下取整最后再除以2,让得分大于*.5的最后都会返回*.5,得分小于*.5的最后都返回一个整数,
    以此来判断是否存在半星),this.score代表父组件传过来的数据,props接收.
    const score = Math.floor(this.score * 2) / 2
    //是否有小数(取余不为0)
    const hasDecimal = score % 1 !== 0
    //对得分下取整,处理亮星
    const integer = Math.floor(score)
    //循环处理,将亮星有多少push进结果数组中
    for (let i = 0; i < integer; i++) {
      result.push(CLS_ON)
    }
    //如果存在小数,就push一个半星
    if (hasDecimal) {
      result.push(CLS_HALF)
    }
    //如果数组结果小于预设最大长度,就push暗星进结果数组中
    while (result.length < LENGTH) {
      result.push(CLS_OFF)
    }
    //返回结果
    return result
  }

最后循环处理结果数组result就ok;

<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>