Vue神技！轻松实现星级评分，半颗星星也能搞定

哈喽，小伙伴们！今天我们来谈谈一个超炫的问题，你们准备好了没？别磨蹭了，咱们直入主题！

想知道怎么做个能评星的组件吗？肯定很关心！别担心，我这就告诉你

 

   

     
   
   {{ score }}
 


export default {
  name: 'Star',
  props: {
    score: Number
  }
}

咱们得先设计个Star组件，用来处理星星的评级功能。接下来，把这个Star组件放进父组件里，同时也给它传递一下评分的数值，懂了？

.star-item.on {
  background-image: url(./img/star24_on@2x.png);
}
.star-item.half {
  background-image: url(./img/star24_half@2x.png);
}
.star-item.off {
  background-image: url(./img/star24_off@2x.png);
}

你试过怎样让星级图不停地转吗？这问题可关键着！那就继续往下看！

咱们用computed计算属性算出一个数组，里面有五个成员，他们分别代表五星图片的类别名称。接着，就是用循环来连接这些类别名称，这样就能逐个看每张星星图片。明白我的意思不？

你是不是好奇怎么把半颗星星显示出来？这确实很关键！别着急，跟着我来看看到底怎么做！

咱们只要搞点小计算就能找到半星显示不显示的规律！跟你说，要想看到半颗星星，得分嘛得比整数部分多出至少五分才行这样子才能显现出来哩。懂了？

好了，这儿就是我来给你们说说如何用Vue做星级评分界面的讲解希望对您有所启发！有啥问题就告诉我，我很快回您的！而且，真心感谢大家一直以来对我们网站的支持！

// 星星长度 
const LENGTH = 5
// 星星的状态
const CLS_ON = 'on'
const CLS_HALF = 'half'
const CLS_OFF = 'off'
export default {
  name: 'Star',
  props: {
    score: Number
  },
  computed: {
    itemClasses () {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      // 半星 (通过跟1取余判断是否为小数)
      let hasDecimal = score % 1 !== 0
      // 全星 （向下取整，获取全星部分）
      let integer = Math.floor(score)
      // 遍历全星
      for(let i = 0; i < integer; i++){
        result.push(CLS_ON)
      }
      // 处理半星
      if(hasDecimal){
        result.push(CLS_HALF)
      }
      // 补齐
      while(result.length < LENGTH){ // 到这里还不够五颗星，则凑空星
        result.push(CLS_OFF)
      }
      return result
    }
  }
}

今天聊了聊怎么做个有星星评分的组件，过程和细节都简单讲了讲。相信大家都看得懂！觉得好别忘了留个言、点个赞、分给朋友看看！让更多人知道这种炫酷的评分特效多棒！