代码展示:
<template>
<div class="pageStar">
<div id="star">
<span v-for="classn in starArrs" :class="classn" class="staritem"></span>
</div>
</div>
</template>
逻辑部分:
export default {
data () {
return {
score:4
}
},
computed:{
starArrs(){
let starArr = [];
let onstar = this.score;
let halfStar = Math.round(this.score-onstar)?true:false;
for(let i=0; i<onstar;i++){
starArr.push('onstar');
}
if(halfStar){
starArr.push('halfstar');
}
while(starArr.length<5){
starArr.push('offstar');
}
return starArr;
}
}
}
css样式:
.staritem{
display: inline-block;
width: 1rem;
height: 1rem;
}
.onstar{
background: url(../../public/img/star24_on@2x.png);
background-size: 1rem;
}
.halfstar{
background: url(../../public/img/star24_half@2x.png);
}
.offstar{
background: url(../../public/img/star24_off@2x.png);
}
#star{
text-align: center;
}
注意
此组件是用来根据API返回的数据动态渲染星星评分数的,并非前端页面评分使用