vue.js高仿饿了吗实现tips

@[TOC]vue.js高仿饿了吗实现tips

高仿饿了吗–tip1

动态评星

目标：根据商家的星级生成指定的五行样式
注意点

1. 无论星级多少，星星的个数都是五颗，所以利用v-for循环生成
2. 利用内联标签span来生成每个星星，样式可以利用不同的背景图片
3. 需要计算出满星的有几个，半星最多只有一个，空星有几个

template

<div class="ratingStar">
       <span class='star' v-for='(star,index) in stars' :key=index :class='star'></span>
</div>

css

.star{
    display:inline-block;
    width:20px;
    height:20px;
    background-repeat:no-repeat;
}
.full{
    background-image:url('star24_on@2x.png');
}
.half{
    background-image:url('star24_half@2x.png');
}
.empty{
    background-image: url('star24_off@2x.png');
}

js

 stars(){
            let full=parseInt(this.score)
            let half=this.score-full>0.5?1:0
            let result=['empty','empty','empty','empty','empty']
            for(let i=0;i<full;i++){
                result[i]='full'
            }
            if(half>0){
                result[full]='half'
            }
            return result
        }

这就是四星半的效果了

关键在于

 v-for='(star,index) in stars' :key=index :class='star'

拿到每个星星的样式，然后对样式进行循环，通过：class绑定循环出来的类样式