Vue动态实现评分效果

1.图片分为三种

on:half:  off

<style>
    .star{
        font-size: 0;
    }
    .star-item{
        display: inline-block;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        margin-right: 22px;
        background-size: 100%;
    }
    .star-item.on{
        background-image: url(img/on.png);
    }
    .star-item.half{
        background-image: url(img/half.png);
    }
    .star-item.off{
        background-image: url(img/off.png);
    }
</style>

<div id="app">
    <ul class="star">
        <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" track-by="index"></span><!--性能优化 track-by 数据不改变时不会重新渲染-->
    </ul>
</div>

<script>
    new Vue({
       el: '#app',
   　data:{
        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<integer;i++){
                result.push("on");
            }
            if(hasDecimal){
                result.push("half");
            }
            while(result.length < 5){
               result.push("off");
            }
           return result;
        }
    }
})
</script>    

根据需求改变代码