星级评价组件---VUE

今天学习了写星级评价，记录一下，万一以后用得着呢

<template>
	<div id="star">
		<span v-for="Class in starArrs" :class="Class" class="staritem"></span>
	</div>
</template>
<script>
	export default{
		props:['star'],
		computed:{
			starArrs(){
				var starArr=[];
				let onstar = parseInt(this.star);
				let halfStar = Math.round(this.star-onstar)?true:false;
				console.log(halfStar)
				for (var i=0;i<onstar;i++){
					starArr.push('onstar')
				}
				console.log(starArr)
				if(halfStar){
					starArr.push('halfstar')
				}
				console.log(starArr)
				while(starArr.length<5){
					starArr.push('offstar')
				}
				console.log(starArr)
				return starArr;
			}
		}
	}
</script>
<style scoped="scoped">
	.staritem{
		display: inline-block; 
		width: 1.6rem;
		height: 1.6rem;
	}
	/*实星的图片*/
	.onstar{	
		background-image: url(star24_on@2x.png);
	}
	/*半个星的图片*/
	.halfstar{
		background-image: url(./star24_half@2x.png);
	}
	/*透明星的图片*/
	.offstar{
		background-image: url(./star24_off@2x.png);
	}
</style>