vue实现一个星级打分效果_vue实现简单的星级评分组件源码

vue星级评分组件源码，具体代码如下所示：

// 行为

export default{

props:['score'],

created(){

console.log("子组件");

},

mounted(){

console.log("打印传递的分数");

},

computed:{

starArrs(){

var starArr=[]; //3.9

// 全星星的个数

let onstar = parseInt(this.score);

console.log(onstar)

// 是否有半星

let halfStar = Math.round(this.score-onstar)?true:false;

// 有多少课灰色的星星

for (var i=0;i

starArr.push('onstar')

}

if(halfStar){

starArr.push('halfstar')

}

while(starArr.length<5){

starArr.push('offstar')

}

return starArr;

}

}

}

/*独立作用域的样式*/

.staritem{

display: inlin