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/38bbfa3f955cbce3330f1cb6818d0ce6216794.png.webp",
     "month_saled": 948,
     "month_saled_content": "月售948",
     "status": 3,
     "status_description": "非可售时间",
     "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
     "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",
    "user_name": "ejX309524666",
    "comment_time": "2017.08.31",
    "comment_unix_time": 1504161290,
    "comment_content": "#奶油坚果酱中套餐#不好吃。还是奥尔良，麦辣鸡腿那些最经典的汉堡好吃。薯条软得不能再软了。我备注了可乐换芬达也没有换。#麦辣鸡翅2块#就还好，里面的肉挺嫩的，很入味。"
  }, {
    "user_icon": "https://img.meituan.net/avatar/6571c42526237b0118f437418e989d1187445.jpg",
    "user_name": "EAG789830055",
    "comment_time": "2017.08.18",
    "comment_unix_time": 1503030166,
    "comment_content": "#麦辣鸡翅2块#送错"
  }
]
     }
   }

Food组件添加商品评价结构

好，现在让我们将评价结构搭出来，并且绑定对应的数据。

  
    
      
 
  
 
    
     
      {{food.rating.title}}
      
(
{{food.rating.like_ratio_desc}}
{{food.rating.like_ratio}}
)
      
     
     
      {{food.rating.snd_title}}
      
     
    
    

     

      


      
      
{{comment.user_name}}
{{comment.comment_time}}
{{comment.comment_content}}
      
     
    
 
      
    
  

导入，注册组件

到这里我们就完成了商品详情页面的评论列表，下篇我们来实现商品评价栏目。

总结

以上所述是小编给大家介绍的Vue实现商品详情页的评价列表功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！