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

Question

完整代码地址：
https://github.com/tuihou1233...

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;
        }
    }

Answer 1

最后返回的时候

因为最后返回的a是string,要把字符串转化成number类型 就可以了；

return a*1;

Answer 2

这种应该使用过滤器去处理
以下截于官网：
在 computed 属性中使用 js 内置方法 .filter method：

<p v-for="user in filteredUsers">{{ user.name }}</p>
computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}