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

<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实现商品详情页的评价列表功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！