星星组件star.vue

整个流程是:

  1. 绑定星星类型的class(48,36,24尺寸),使用starType

  2. 使用class来显示星星,有3种类型,全星,半星,无星,使用star-item代表星星本身,然后分别使用on,off,half代表三种不同类型的星星

  3. 一个span代表一个星星项目,并且使用v-for循环将星星项目输出

组合出来的星星html就类似这样

html部分

js部分

  • 设置常量是为了方便解耦

  • 星星计算比较巧妙(根据分数转换为星星数)

    • 对于分数score进行2然后向下取整,然后再除以2,是为了获取所有星星的数量,并且这个数量是0.5倍数的,例如4.6 2就是9.2,然后向下取整是9,然后再除以2就是4.5,那么就可以得到一个0.5倍数的星星数,可以转换为4个全星+一个半星

    • 对于非整数的星星算作是半个星星,需要知道是否有存在这种情况,所以分数score%1 ,例如8 % 1是0, 8.5 % 1就不是0,并且这个半星只会出现一次,因为半星状态就只要一个

    • 没有星星的部分是要补全的,这里使用while循环来处理这种情况

css部分

你可能感兴趣的:(vue.js)