众所周知，很多外卖应用都有评分星。这里我总结一下评分组件的开发和学习视频：饥饿和实战(海量开放在线课程Net)

1.html部分

div class=' star ' : class=' start type ' span v-for=' item class中的item class ' : class=' item class ' class=' star-item ' track-by=' $ index '/span/div解释

1.在大div中绑定starType因为整个App中有多个评分组件，它们的大小不一样，所以根据它们的大小动态绑定类。

上一节的头文件组件开发中也介绍了同样的原理，但是我开始理解vue.js中：class的含义，以前我想，既然可以直接添加类，为什么还要用绑定类做更多的工作呢？现在我明白了，对于基本的样式设置，直接添加类是可以的，但是有时候根据不同的状态有不同的样式时，就需要使用绑定类。

2 . v-对于这里我们不写五span，而是遍历itemClasses，这是vue.js中常见的方法，它不仅减少了代码，而且动态获取数据。

2.js部分

1.获取评分数据

和上一节一样，我们通过道具接收数据。我们要接收两个数字，一个是恒星的大小，另一个是分数。

prop s : { size : { type : number }，score : {type : number}} 2。属性的计算

1).接收大小并动态绑定不同类

starType(){ return ' star-' this . size；} .star-48 { width : 20px；height: 20pxmargin-right : 22px；背景尺寸size: 20px 20px} .star-36 { width : 15px；高度： 15px；右边距： 6px；背景尺寸size: 15px 15px} .star-24 { width : 10px；height: 10px右边距： 3px；背景尺寸size: 10px 10px}2).通过计算，确定加满星、半星、无星

const LENGTH=5；const CLS _ ON=' ON '；const CLS _ HALF=' HALF '；const CLS _ OFF=' OFF '；item CLaSS(){ let result=[]；让分数=math . floor(this . score * 2)/2；让hasDecimal=得分%1！==0;让integer=Math.floor(分数)；for(var I=0；I整数；I){ result . push(CLS _ ON)；} if(hasDecimal){ result . push(CLS _ HALF)；} while(result . length length){ result . push(CLS _ OFF)；}返回结果；}这个代码的思路是：创建一个数组存储星星，判断分数是否在. 5以上，把分数四舍五入，多少分推几个上星进去，有在. 5以上的，推一半，然后推掉直到长度达到5。

3).css以star-48的大小为例。star-48 . on { background-image : URL('电子邮件保护')}。star-48 . half { background-image 3360 URL('电子邮件保护')}。star-48 . off { background-image : URL()。

template div class=' star ' : class=' StartType ' span v-for=' item class in item class ' : class=' item class ' class=' star-item ' track-by=' $ index '/span/div/template script type=' text/JavaScript ' const LENGTH=5；const CLS _ ON=' ON '；const CLS _ HALF=' HALF '；const CLS _ OFF=' OFF '；导出默认值{ prop : { size : { type : number }，score:{ type:Number } }，computed : { starttype(){ return ' star-' this。大小；}，itemClasses() { let结果=[];让分数=数学。地板(这个。分数* 2)/2；让hasDecimal=得分%1!==0;让integer=Math.floor(分数);for(var I=0；我整数；I){结果。push(CLS _ ON)；} if(hasDecimal){ result。push(CLS _ HALF)；} while(结果。长度长度){结果。推送(CLS _关闭)；}返回结果；} } };/scriptstyle type='text/css ' .star { font-size : 0；} /* .star-48 {宽度： 20pxheight : 20 pxmargin-right : 22px；背景尺寸size: 20px 20px} */。star-48 : last-chlid { margin-right : 0；} .star-48 .在{背景图像：网址('电子邮件保护')}上star-48 .半{背景图像： URL('电子邮件保护')} .star-48 .关闭{背景图像：网址('电子邮件保护')} .star-36 {宽度： 15px高度： 15px右边距： 6px背景尺寸size: 15px 15px}。star-36 .没有{背景图像：网址('电子邮件保护')} .star-36 .半{背景图像： URL('电子邮件保护')} .star-36 .关闭{背景图像：网址('电子邮件保护')} .star-24 {宽度： 10px高度： 10px右边距： 3px背景尺寸size: 10px 10px}。星-24。没有{背景图像：网址('电子邮件保护')} .星-24。半{背景图像： URL('电子邮件保护')} .星-24。关闭{背景图像：网址('电子邮件保护')} .星项目{ display : inline-block；背景-重复：不重复；宽度： 20pxheight : 20 pxmargin-right : 22px；背景尺寸size: 20px 20px}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。