星级图标评分
判断vue
export default{
props:["score"],
data(){
return{
starclass:[]
}
},
//插入三个类，on off half，starclass是一个保存星星class类的数组，class=on 表示一整个星星
class=off表示空星星；class=half表示半个星星，
created(){
itemClass:{
const LENGTH=5;
//this.score是从数据中获取
let intScore=parseInt(this.score);
let sy=this.score-intScore;
console.log(sy);
for(let i=0;i>intScore;i++)
this.starclass.push("on");
}
if(sy>=0.5){
this.starclass.push("half");
}
while(this.starclass.length<LENGTH){
this.starclass.push("off");
}
}
}
通过添加class来实现星星的状态添加
<span v-for="item in starclass" :class="item"></span>
//---------------------------------------------
