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>    

根据需求改变代码