本篇我們來實現商品詳情頁的評價列表。
網站建設哪家好，找創(chuàng)新互聯建站！專注于網頁設計、網站建設、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了莆田免費建站歡迎大家使用！
必要的數據
這里咱們舉一個數據的例子，明明白白地了解這些數據是如何綁定到模板中的。
數據來自于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組件添加商品評價結構
好，現在讓我們將評價結構搭出來，并且綁定對應的數據。
![]()
{{comment.user_name}}{{comment.comment_time}}{{comment.comment_content}}
導入，注冊組件
到這里我們就完成了商品詳情頁面的評論列表，下篇我們來實現商品評價欄目。
總結
以上所述是小編給大家介紹的Vue實現商品詳情頁的評價列表功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
