vue.js项目实战运用篇之抖音视频APP-第十节： 评论列表功能

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第十节： 评论列表功能

回顾及介绍

在第七节中我们实现了点评快捷键功能的组件，在这一章节中将进一步了解其中的点评功能的具体实现及父子组件的响应传值的解说。

功能实现步骤

1.在视频列表组件中创建评论列表布局
2.定义评论功能函数
3.在点评快捷键组件中定义响应函数
【温馨提示】
视频列表组件地址：common/components/index/VidoeList；
视频列表组件地址：common/components/index/RightBar。

功能实现

1.在视频列表组件中创建评论列表布局
紧接着滑动组件的同级，创建布局，代码如下：

 <!--评论-->
    <transition name="up">
      <div class="comment-wrap" v-if="showComment">
        <div class="comment-list">
          <div class="comment-top">
            <div class="number">15W条评论</div>
            <div class="close" @click="close">
              <span class="iconfont icon-guanbi" style="font-weight: bold;font-size: 13px"></span>
            </div>
          </div>
          <div class="comment-body">
            <!-- 评论列 -->
            <div class="comment-box">
              <div class="comment-item">
                <img class="user-pic" src="../../../assets/images/avatar-1.jpg" alt />
                <div class="item-info">
                  <div class="replay">
                    <p class="name">快乐仔逛学习</p>
                    <p
                      class="replay-des"
                    >快乐仔每天在学习</p>
                    <p class="time">03-19