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

某视频剪辑软件星级评分组件源码，具体代码如下所示：

！-自定义组件模板！-结构层-div id“star”span v-代表“star arrs”:“star item”/span中的“n ”!-span class=' star item onstar '/span span class=' star item onstar '/span span class=' star item half star '/span span=' star item offstar '/span-！-根据传递过来的分数得到对应的星星4.7 四颗半星一个位数代表的是全里亮， 2,当分数大于等于0.5 是一个半星3.当全星和半星不足五个的时候，剩下的都是灰色的星星- /div/templatescript//行为导出默认{道具：['分数']，已创建(){ console.log('子组件');},已挂载(){ console.log('打印传递的分数');}，计算出： { star arrs(){ var star arr=[]；//3.9//全星星的个数让onstar=parsent(这。分数)；console.log(onstar)//是否有半星让半星=数学。圆(这个。score-onstar)？true:false//有多少课灰色的星星for(var I=0；ionstarI){ starar。push(' onstar ')} if(半星){ starar。push('半星')} while(staar。长度5){ starar。push(' offstar ')} return starar；} } }/scriptstyle作用域='作用域'/*独立作用域的样式*/.星形项目{ display : inline-block；宽度： 0.37037雷姆；高度： 0.37037雷姆；} /*全星星*/.onstar{ background: url (./[电子邮件受保护])；背景尺寸： 0.37037雷姆；} .halfstar{ background: url(' ./[电子邮件保护]')；} .offstar{ background: url(' ./[电子邮件保护]')；}/样式背景图

[电子邮件保护]

[电子邮件保护]

[电子邮件保护]

总结

以上所述是小编给大家介绍的某视频剪辑软件实现简单的星级评分组件源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！