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><script>// 行为  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;      }    }  }</script><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>