Vue实现商品详情页的评价列表功能

{            "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块#送错"                }              ]            }          }

<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>