美文网首页
星星组件实现

星星组件实现

作者: 小伙子太认真 | 来源:发表于2019-03-25 11:54 被阅读0次

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

1、如何实现全星?

2、如何实现半星?

3、如何实现无星?

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

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

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

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

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

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

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

喜欢你的赞!!!

相关文章

网友评论

      本文标题:星星组件实现

      本文链接:https://www.haomeiwen.com/subject/krjmvqtx.html