饿了么的五角星有三种形状，分别是实星，半星，空星

并且组件要能实现，这个五角星不同大小，评分也不一样，比如满分五颗星，四颗半星，四颗星等等.

所以需要像组件传入一个大小：大小，一个分数：score

代码如下：

template div class=' star ' : class=' StartType ' span class=' star-item ' : class=' item class ' v-for=' item class in item class '/span/div/template script type=' text/ecmascript-6 ' const LENGTH=5；const CLS _ ON=' ON '；const CLS _ OFF=' OFF '；const CLS _ HALF=' HALF '；导出默认值{ prop : { size : { type : number }，score:{ type:Number } }，computed : { starttype(){ return ' star-' this。大小；}，itemClasses(){ //计算属性让结果=[];让分数=数学。地板(这个。分数* 2)/2；让hasDecimal=得分%1!==0;//是否有效数让integer=Math.floor(分数);//取整for(var I=0；我整数；I){结果。push(CLS _ ON)；} if (hasDecimal) { //有且最多一个半星结果推送(CLS)半程);} while(结果。长度长度){结果。推送(CLS _关闭)；} //数组填充完毕返回结果；} } };/script style lang='手写笔ref='工作表样式/手写笔@import././common/styl/mixin。styl '；星形字体大小：0。星形项目显示：内嵌块后台-重复：-不重复.star-48 .星形项目宽度：20px高度：20px边距-右侧：22px背景-大小尺寸：20像素20像素：最后最后一个子边距-右侧：0。在bg-image上(' star48_on ').半bg-image('star48_half ').关闭BG-image(“star 48 _ off”).star-36 .星形项目宽度：15px高度：15px边距-右侧：6px背景尺寸尺寸：15px 15px :last最后一个子边距-右侧：0。在bg-image上(' star36_on ').半bg-image('star36_half ').关闭BG-image(“star 36 _ off”).星-24。星形项目宽度：10px高度：10px边距-右侧：3px背景-尺寸尺寸：10px 10px :last最后一个子边距-右侧：0。在bg图像上(' star24_on ').半bg-image('star24_half ').关闭BG-图像(“星24 _关闭”)/样式其中：使用了大小为48,36,24,所以我们需要图片3种类型的图片，并且要使用适应不同分辨率，要有@2x.png,@3x.png图片

对了锥齿轮图像方法是在mixin.styl中的，代码如下

BG-图像($ URL)背景-图像： URL($ URL ' @ 2x。png ')@ media(-WebKit-min-device-pixel-ratio :3)，(min-device-pixel-ratio :3)背景-image : URL($ URL ' @ 3x。png ')组件的使用就很简单了

star : size=' 48 ' : core=' 3.5 '/star(9502 . 163.com)

总结

以上所述是小编给大家介绍的vue.js实现评价五角星组件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！