完整代码地址: https://github.com/tuihou123321/gitTest/blob/master/projects/elemeAll-html/home.html
图片效果: https://sfault-image.b0.upaiyun.com/192/804/1928048893-59d33bba2e3f4_articlex
html 模板代码
<div class="starBox">
<span class="grey">
<i class="fa fa-star" v-for="n in 5"></i>
</span>
<span style="color:#ff9a0d;">
<i class="fa fa-star" v-for="n in starFun(item,0)"></i>
<i class="fa fa-star-half" v-for="m in starFun(item,1)"></i>
</span>
</div>
vue 中相应方法代码
methods:{
starFun:function(item,index){
var num=item.rating+"";
var a;
if(index==0){
if(num.indexOf(".")<0){
a=num;
}
else{
a=num.split(".")[0];
}
}
else{
if(num.indexOf(".")<0 || num.split(".")[1]<5 ){
a=0;
}
else{
a=1;
}
}
console.log(a);
return a;
}
}
```
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.