Vue简单的实现五星级评分
效果:原理:类似于四舍五入的方法,不同点在于四舍五入是把数字转成整数,而这个方法是把分数转成整数或(整数+0.5),有点抽象,举个例子就明白了,例如 把4.7转成4.5(即四个半星),4.3转成4.0(即四个星),4.0就是四个星。需要准备三张星星图片,即全星,半星,空星。代码:<template><div class="score"&
·
效果:
原理:
类似于四舍五入的方法,不同点在于四舍五入是把数字转成整数,而这个方法是把分数转成整数或(整数+0.5),有点抽象,举个例子就明白了,例如 把4.7转成4.5(即四个半星),4.3转成4.0(即四个星),4.0就是四个星。
需要准备三张星星图片,即全星,半星,空星。
代码:
<template>
<div class="score">
<!--循序生成五星,原理是通过给span绑定类名设置星星背景图-->
<span class="star-item" v-for="star in starScore" :class="star"></span>
<span>{{temp}}</span>
</div>
</template>
<script>
export default {
name: "Score",
data(){
return {
temp:4.3
}
},
computed:{
starScore(){
let stars = []; //定义一个空数组来存储类名
let score = Math.floor(this.temp * 2)/2; //把评分转成整数或整数+0.5(如:4.7转成4.5,4.2转成4.0)
let decimalScore = score%1 !== 0; //取1的余数不等于0,说明有小数(显示半星)
let integerScore = Math.floor(score); //取整数分数(显示全星)
for (let i=0; i<integerScore; i++){
stars.push('on') //整数分数为多少,就添加多少个全星
}
if (decimalScore){
stars.push('half') //存在小数分数,添加一个半星
}
while(stars.length<5){
stars.push('off') //如果星星数不满5颗,空星星填充
}
return stars
}
}
}
</script>
<style scoped lang="less">
.score{
display: flex;
align-items: center;
justify-content: center;
.star-item{
width: 20px;
height: 20px;
display: inline-block;
margin: 0 5px;
background: no-repeat;
}
.star-item.on{
background: url("../../assets/star/star24_on@2x.png"); //全星
}
.star-item.half{
background: url("../../assets/star/star24_half@2x.png"); //半星
}
.star-item.off{
background: url("../../assets/star/star24_off@2x.png"); //空星星
}
}
</style>
(完)
参考文章:http://baijiahao.baidu.com/s?id=1581695099833705869&wfr=spider&for=pc
更多推荐
已为社区贡献12条内容
所有评论(0)