星级图标判断

星级图标评分

判断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>

//---------------------------------------------