这篇文章主要介绍了Vue实现商品详情页的评价列表功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
本篇我们来实现商品详情页的评价列表。
必要的数据
这里咱们举一个数据的例子，明明白白地了解这些数据是如何绑定到模板中的。
数据来自于Foods父组件，当我们选中商品，跳转到商品详情页，那么就需要依赖父组件中的商品数据，在商品详情页面展示评论，当然也可能没有如下“rating”数据。那我们在后面的模板中，就不展示对应的html结构。
{ "id": 96985579, "name": "麦辣鸡翅2块", "min_price": 11, "praise_num": 22, "praise_content": "赞22", "tread_num": 0, "praise_num_new": 22, "unit": "例", "description": "", "picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce333<b style="color:transparent">来&源gao@dai!ma.com搞$代^码%网</b>0f1cb6818d0ce6216794.png-600.webp", "month_saled": 948, "month_saled_content": "月售948", "status": 3, "status_description": "非可售时间", "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png-600", "rating": { "comment_count": 4, "title": "外卖评价", "snd_title": "4条评论", "praise_friends": "", "like_ratio_desc": "好评度", "like_ratio": "100%", "filter_type": 1, "comment_list": [ { "user_icon": "https://img.meituan.net/avatar/71ef89fa000e783d5b8d86c2767a9d28195580.jpg-600", "user_name": "ejX309524666", "comment_time": "2017.08.31", "comment_unix_time": 1504161290, "comment_content": "#奶油坚果酱中套餐#不好吃。还是奥尔良，麦辣鸡腿那些最经典的汉堡好吃。薯条软得不能再软了。我备注了可乐换芬达也没有换。#麦辣鸡翅2块#就还好，里面的肉挺嫩的，很入味。" }, { "user_icon": "https://img.meituan.net/avatar/6571c42526237b0118f437418e989d1187445.jpg-600", "user_name": "EAG789830055", "comment_time": "2017.08.18", "comment_unix_time": 1503030166, "comment_content": "#麦辣鸡翅2块#送错" } ] } }
Food组件添加商品评价结构
好，现在让我们将评价结构搭出来，并且绑定对应的数据。
<div class="food"> <div class="food-wrapper"> <div class="food-content"></div><!-- 商品评价列表结构，数据的绑定渲染 --><div class="rating-wrapper"> <div class="rating-title"> <div class="like-ratio"> <span class="title">{{food.rating.title}}</span><span class="ratio"> ( {{food.rating.like_ratio_desc}} <i>{{food.rating.like_ratio}}</i> ) </span></div><div class="snd-title"> <span class="text">{{food.rating.snd_title}}</span><span class="icon icon-keyboard_arrow_right"></span></div></div><ul class="rating-content"> <li class="comment-item"> <div class="comment-header"> </div><div class="comment-main"> <div class="user">{{comment.user_name}}</div><div class="time">{{comment.comment_time}}</div><div class="content">{{comment.comment_content}}</div></div></li></ul></div></div></div>
导入，注册组件
到这里我们就完成了商品详情页面的评论列表，下篇我们来实现商品评价栏目。
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是Vue实现商品详情页的评价列表功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue实现商品详情页的评价列表功能
转载请注明原文链接：Vue实现商品详情页的评价列表功能
