通过类名遍历评分星星

在只显示评分及星星的时候，如果有金色、半金以及无色的⭐图案，而此时要遍历出一个数据，就要实现这个算法。

假如当前评分是3.5，那么就会有三个全金，一个半金，一个无色的星星。

实现

将评分提取成可复用的组件，三种形状的星星用类名来区别开，此时只需要循环组件就能实现星星的显示。

创建一个数组，数组内装有5个类名，组件通过遍历数组中的类名来添加该样式的星星

export default {
	props: {
		score: Number // 评分
	},
	computed: {
		starClasses () {
			const {score} = this
			const scs = []
			// 向scs中添加n个ON
			const scsInt = Math.floor(score)
			for (let i = 0; i<scsInt; i++) {
				scs.push(ON)
			}
			// 向scs中添加0/1个HALF
			if (score*10 - scsInt*10 >= 5) {
				scs.push(HALF)
			}
			// 向scs中添加n个OFF
			while (scs.length<5) {
				scs.push(OFF)
			}
			return scs
		}
	}
}

当传来的score值为3.3时，计算属性startClasses就会向scs中添加3个ON，1个HALF，1个OFF，这三种类名分别对应三种状态图片，在组件中遍历startClasses 向其中动态添加类名即可

<span v-for="(sc, index) in startClasses" :class="sc" :key="index"></span>