vue实现简单的星级评分组件源码

<!--自定义组件-->
<template>
  <!--结构层-->
    <div id=\"star\">
      <span v-for=\"classn in starArrs\" :class=\"classn\" class=\"staritem\"></span>
      <!--<span class=\"staritem onstar\"></span>
      <span class=\"staritem onstar\"></span>
      <span class=\"staritem halfstar\"></span>
      <span class=\"staritem offstar\"></span>-->
      <!--根据传递过来的分数得到对应的星星
        4.7   四颗半星
        1个位数代表的是全里亮，
        2，当分数大于等于0.5 是一个半星
        3.当全星和半星不足五个的时候，剩下的都是灰色的星星
      -->
    </div>
</template>
< >
// 行为
  export default{
    props:[\'score\'],
    created(){
      console.log(\"子组件\");
    },
    mounted(){
      console.log(\"打印传递的分数\");
    },
    computed:{
      starArrs(){
        var starArr=[];  //3.9
//       全星星的个数
        let onstar = parseInt(this.score);
        console.log(onstar)
//       是否有半星
        let halfStar = Math.round(this.score-onstar)?true:false;
//       有多少课灰色的星星
        for (var i=0;i<onstar;i++) {
          starArr.push(\'onstar\')         
        }
        if(halfStar){
          starArr.push(\'halfstar\')          
        }
        while(starArr.length<5){
          starArr.push(\'offstar\') 
        }
        return starArr;
      }
    }
  }
</ >
<style scoped=\"scoped\">
  /*独立作用域的样式*/
  .staritem{
    display: inline-block; 
    width: 0.37037rem;
    height: 0.37037rem;
  }
  /*全星星*/
  .onstar{
    background: url(./star24_on@2x.png);
    background-size: 0.37037rem;  
  }
  .halfstar{
    background: url(\'./star24_half@2x.png\');
  }
  .offstar{
    background: url(\'./star24_off@2x.png\');
  }
</style>