根据评分(数字)去设置五星的全满与半满

// 定义星星的最大长度
const LENGHT = 5
// 星星对应的class
const CLS_ON = 'fa-star'
const CLS_HALF = 'fa-star-half-empty'
// 填充
const CLS_OFF = 'fa-star-o'
 //4.8 四个全星 一个半星
      // 装星星
      let result = []

      // 对分数进行处理,向下取0.5倍数 4.8=>4 ----> 4.8*2=9.6=>9  /2 =>4.5  四个全星 一个半星
      let score = Math.floor(this.ratingData * 2) / 2
      //控制半星 小数对1取余的话 会有小数点
      let hasDecimal = score % 1 !== 0
      // 控制全星
      let interger = Math.floor(score)

      // 放入数组
      for (let i = 0; i < interger; i++) {
        // 全星
        result.push(CLS_ON)
      }

      if (hasDecimal) {
        // 半星
        result.push(CLS_HALF)
      }
      while (result.length < LENGHT) {
        // 补齐
        result.push(CLS_OFF)
      }

而后,再去遍历数组,根据数组的类名可以知道是全满的星星还是半满的星星

demo





你可能感兴趣的:(根据评分(数字)去设置五星的全满与半满)