vue实现一个星级打分效果_vue实现星级评价效果

希望对你们有用，已经自己试过可以的才发布出来的

效果如下：

html：

JS：

export default{

data(){

return{

score: 4,

}

},

computed:{ //计算属性

itemClasses(){

let result = []; // 返回的是一个数组,用来遍历输出星星

let score = Math.floor(this.score * 2 ) / 2; // 计算所有星星的数量

let hasDecimal = score % 1 !== 0; // 非整数星星判断

let integer = Math.floor(score); // 整数星星判断

for(let i=0;i

result.push("on"); // 一个整数星星就push一个CLS_ON到数组

}

if(hasDecimal){ // 非整数星星使用half

result.push("half"); // 类似

}

while(result.length < 5){// 余下的用无星星补全,使用off

result.push("off");

}

return result;

}

},

methods:{

stars:function