vue星级评选

将星级评选封装成一个新的组件，然后在其他组件中引入这个封装好的星级组件————import…from…和components（局部注册）
最后写上这个标签就引入完成了：

这是几个星星的图片：

关于里面的temp…-----这是在一个v-for遍历出来的数组中循环得到的一个属性，到时候你看看你获取到的数据中这个星级的分数是多少。。

<template>
  <div>
    <div id="mystar">
    	<span class="starall" v-for="starclass in scoreArray" :class="starclass"></span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    	
    }
  },
  props:{
  	score:[Number,String]
  },
  created(){
  	console.log(this.score)
  },
  computed:{
  	scoreArray(){
  		var scoreArr=[]
  		var staron=parseInt(this.score)
  		console.log(staron)
  		var ifhalf=this.score[2]>=5?true:false
  		for(var i=0;i<staron;i++){
  			scoreArr.push("staron")
  		}
  		console.log(scoreArr)
  		if(ifhalf){
  			scoreArr.push("starhalf")
  		}
  		while(scoreArr.length<5){
  			scoreArr.push("staroff")
  		}
  		console.log(this.score)
  		return scoreArr
  	}
  }
}
</script>
<style scoped>
.starall{
	display: inline-block;
	width: 0.243902rem;
	height: 0.243902rem;
}
.starhalf{
	background: url(../assets/half.png);
	background-size: 0.243902rem 0.243902rem;
}
.staroff{
	background: url(../assets/off.png);
	background-size: 0.243902rem 0.243902rem;
}
.staron{
	background: url(../assets/on.png);
	background-size: 0.243902rem 0.243902rem;
}
</style>