美文网首页
模仿豆瓣电影星星评分

模仿豆瓣电影星星评分

作者: Remember_柏查 | 来源:发表于2019-08-13 15:58 被阅读0次

    今天跟着教程完成了星星评分模板的编写就写一下今天学习的总结 方便自己记忆的更牢固一些

    首先我要查看查看星星的数据 是在subject 里面的rating.stars 里面 他的值都为 30,为3颗星星。50为5颗星。

    我们定义一个公共的方法来调用这个星星组件在util.js文件里面新建一个getstars方法

    然后我们在index.js 文件中引入util.js文件                                                                                                 

    然后在获取星星数据在之前index.js文件里面 getdata方法里面获取星星数据

    获取到了数据我们就要把他显示在页面了 。我们现在没有加半星 只有整星和没有星星

    就这2中情况 我们显示的时候用三元运算符显示星星的种类

    找到星星页面模板使用的页面                                                                                                                             

    星星组件有2个数据需要显示我们就对象赋值的方式吧数据传递过去

    星星模板页面要判断显示的星星样式了, 如果i 为1的话显示star.png 否则显示no-star.png

    最后结果

    相关文章

      网友评论

          本文标题:模仿豆瓣电影星星评分

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