星星组件实现

星星组件实现思路:(比如传递进来3.5,怎么变成星星)

1、如何实现全星?

2、如何实现半星?

3、如何实现无星?

我们知道就要三个全星,一个半星,一个无星

先明确一个目标,就是要做成数组的形式,因为在vue中有列表渲染方法可以使用。列表渲染需要遍历数组来进行页面渲染。

全星的话就用,这个数先向下取整,然后进行for循环,将这个数的星星数据加进去。

半星的话:将这个数乘以2,然后判断是否为奇数来添加到数组中。

无星的话:将这个数(3.5)向上取整,然后用5减去,得到的数进行循环,添加到数组里面。

其实实现思路有很多种,这只是其中的一种。

看这两张图的前提是会ES6和vue,不然就看看思路好了。

喜欢你的赞!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,879评论 0 1
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组...
    鲁大师666阅读 43,542评论 5 97
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    小姜先森o0O阅读 13,291评论 0 72
  • 一、了解学情,讨论导入 “风声雨声读书声,声声入耳,家事国事天下事,事事关心。” 生活琐事与信息时代的大爆炸,如何...
    槿七_d1ee阅读 1,209评论 1 1
  • 洪武大帝这一篇讲述的大都是战争故事,看得我好不过瘾。 第1-23章讲述明太祖朱元璋的故事 朱元璋从一个乞丐白手起家...
    英天阅读 3,003评论 0 2