类似豆瓣电影的星级样式

1.获取数据是10分制，所以需要转换为5分制
2使用双重遍历，判断整数有多少，是否有小数；几个整数就转换为几个实星，有小数则填充一个半实星，后用空星填充至5个

• 因为从后台获取来的数据为10分制，首先想到了vue中的filter来洗数据，但使用后无法再次利用
• 遂试试vue中的computed属性，因为获取的数据是对象，没找到合适的使用方法
• 在网上搜寻v-for和computed搭配使用的例子时，发现可以可以使用methods来洗数据

starsItem(val){
     let stars = tenToFive(val)//将10分制转换为5分制

     this.stars>5?this.stars=5:this.stars 
     let resStar =[]//储存各种星星样式的数量
     let hasDecimal = stars % 1 !== 0 //是否有小数
     let integer = Math.floor(stars)  //判断整数
     for (let i = 0; i<integer;i++){
        resStar.push('fa-star')  //实星 的数量
     }
     if(hasDecimal){
        resStar.push('fa-star-half-empty')//有小数填充一个 半实星
     }
     while (resStar.length<5){
        resStar.push('fa-star-o') //用 空星 填充后面的
     }
    return resStar
}

👆将遍历出来的值传入starsItem(val)返回一个数组，再进行二次遍历

<span class="star">
      <i class="fa"
       :class="star"
       v-for="(star,index) in starsItem(item.stars)"
       :track-by="index"></i>
 </span>

👆这一步就比较简单了，item.stars的值被返回后得到一个长度为5的数组，为每个<i>设置不同的样式

By the way : 使用vue过滤器全局过滤器为Vue.filter，局部过滤器为filters,一定要注意局部有s