vue实现星级评分

	<div>
		<span v-for="item in starArr" :class="item">span>
		
	div>

	export default {
		name:"star",
		props:{star:String},
		computed:{
			starArr(){
				//星级评分
				var starClass = [];
				var onstar = parseInt(this.star)
				// 满星
				for(let i=0;i<onstar;i++){
					starClass.push('on_star')
				}
				var half = this.star-onstar
				//半星
				if(half>=0.5){
					starClass.push('half_star')
				}
				//灰色星星
				while(starClass.length<5){
					starClass.push('off_star')
				}
				return starClass;
			}
		}
		
	}

/*图片路径需要更改自己电脑上的路径*/
	.half_star{
		width:0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: url("../../../static/[email protected]");
		background-size: 100%;
	}
	.on_star{
		width:0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: url(../../../static/star24_on@2x.png);
		background-size: 100%;
	}
	.off_star{
		width:0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: url(../../../static/star24_off@2x.png);
		background-size: 100%;
	}

直接复制到后缀名为 .vue的文件中就可以使用 不过我的props是进行了父传子接收数据 如果你不需要父传子，那么你要自己写评分了 我的评分是在0-5这个范围之间 如果你是别的分数的话，可以对star部分稍作更改

学无止境