本篇我們來實現商品詳情頁的評價列表。
必要的數據
這里咱們舉一個數據的例子，明明白白地了解這些數據是如何綁定到模板中的。
數據來自于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組件添加商品評價結構
好，現在讓我們將評價結構搭出來，并且綁定對應的數據。
<templete> <transtition name="food-detail"> <div class="food" v-show="showFlag" ref="foodView"> <div class="food-wrapper"> <div class="food-content"></div> <!-- 商品評價列表結構，數據的綁定渲染 --> <div class="rating-wrapper"> <div class="rating-title"> <div class="like-ratio" v-if="food.rating"> <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" v-if="food.rating"> <span class="text">{{food.rating.snd_title}}</span> <span class="icon icon-keyboard_arrow_right"></span> </div> </div> <ul class="rating-content" v-if="food.rating"> <li v-for="comment in food.rating.comment_list" class="comment-item"> <div class="comment-header"> <img :src="comment.user_icon" v-if="comment.user_icon"> <img src="./anonymity.png" v-if="!comment.user_icon"> </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> </transition></templete>導入，注冊組件
<script> // 導入BScroll import BScroll from "better-scroll"; // 導入Cartcontrol import Cartcontrol from "components/Cartcontrol/Cartcontrol"; // 導入Vue import Vue from "vue"; export default { data() { return { showFlag: false }; }, //接收來自Goods父組件中選中的food； props: { food: { type: Object } }, methods: { //這里是上篇我們實現商品詳情頁的方法 }, components: { Cartcontrol, BScroll }};</script>到這里我們就完成了商品詳情頁面的評論列表，下篇我們來實現商品評價欄目。
總結
以上所述是小編給大家介紹的Vue實現商品詳情頁的評價列表功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
