uniapp星级评分组件——（简单实现）

1. 利用数组渲染的原理，把星星利用标识来区分
2. 利用循环渲染的方式，再判断渲染出哪种型状的星星

<template>
	<view class="score">
		<view  v-for="(item,index) in handleScoreList" :key="index">
                    	<!--这里导入iconfont文字图标的星星标签-->
			<view class="stars iconfont icon-xingxing1" v-if="item == 2"></view> 
			<view class="stars iconfont icon-bankexingxing" v-if="item == 1"></view>
			<view class="stars iconfont icon-kongxinxingxing" v-if="item == 0"></view>											
		</view>
		{{score}}
	</view>
</template>

<script>
	export default {
		props:['score'], 	//父组件导入的评分数
		data() {
			return {
				scoreList:[0,0,0,0,0], 	 	//星星 0为空心星星  1为半心星星  2为实心星星
              			scoreItem: this.score>=10?5:this.score/2     //星星数不超过五个，最高评分为10分上限
			};
		},
		computed: {
			handleScoreList() {
            			
				for(let i=0; parseInt(this.scoreItem)-1 >= i; i++){   //遍历评分，评分取整parseInt()
					this.scoreList[i] = 2			     //	按下标把对应数组里对应下标的星星转为实心
				}
				if(!Number.isInteger(this.scoreItem)){	//判断评分是否有小数点
					this.scoreList[Math.floor(this.scoreItem)] = 1  //向上取整Math.floor()，把对应的星星改为半心
				}
				return this.scoreList    //返回数据，渲染
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.score{
		display: flex;
		color: #333;
		align-items: center;
		font-size: 25rpx;
		.stars{
			font-size: 25rpx;
			margin-right: 10rpx;
			color: #ffc82a;
		}
	}
</style>