vue 渲染的一些问题,v-for 要求渲染多次，最后只渲染一次？

完整代码地址： https://github.com/tuihou123321/gitTest/blob/master/projects/elemeAll-html/home.html

图片效果： https://sfault-image.b0.upaiyun.com/192/804/1928048893-59d33bba2e3f4_articlex

html 模板代码

 <div class="starBox">
    <span class="grey">
        <i class="fa fa-star" v-for="n in 5"></i>
    </span>
    <span style="color:#ff9a0d;">
        <i class="fa fa-star" v-for="n in starFun(item,0)"></i>
        <i class="fa fa-star-half" v-for="m in starFun(item,1)"></i>
    </span>
</div>

vue 中相应方法代码

    methods:{               
        starFun:function(item,index){
            var num=item.rating+"";
            var a;
            if(index==0){
                if(num.indexOf(".")<0){
                    a=num;
                }
                else{
                    a=num.split(".")[0];
                }
            }
            else{
                if(num.indexOf(".")<0 ||  num.split(".")[1]<5 ){
                    a=0;
                }
                else{
                    a=1;
                }
            }
            console.log(a);
            return a;
        }
    }
    
    ```