最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

userId: ‘user-9’,

userName: ‘牛九’,

articleId: ‘article-1’,

commentId: ‘comment-10’,

replyId: ‘comment-1’,

desc: ‘钱钟书’,

time: ‘2021-04-05 15:30:25’

},

{

userId: ‘user-5’,

userName: ‘王五’,

articleId: ‘article-2’,

commentId: ‘comment-5’,

replyId: null,

desc: ‘哈哈哈’,

time: ‘2021-04-05 15:30:25’

},

{

userId: ‘user-6’,

userName: ‘张六’,

articleId: ‘article-1’,

commentId: ‘comment-6’,

replyId: ‘comment-4’,

desc: ‘不对吧’,

time: ‘2021-04-05 15:30:25’

},

{

userId: ‘user-7’,

userName: ‘顾七’,

articleId: ‘article-1’,

commentId: ‘comment-7’,

replyId: ‘comment-6’,

desc: ‘对的，就是钱钟书’,

time: ‘2021-04-05 15:30:25’

},

{

userId: ‘user-8’,

userName: ‘朱八’,

articleId: ‘article-3’,

commentId: ‘comment-8’,

replyId: null,

desc: ‘这本书真不错’,

time: ‘2021-04-05 15:30:25’

},

{

userId: ‘user-9’,

userName: ‘纪九’,

articleId: ‘article-4’,

commentId: ‘comment-9’,

replyId: null,

desc: ‘真的好看’,

time: ‘2021-04-05 15:30:25’

}

]

}

},

created() {

this.initCommentLists()

this.initArticleLists()

},

methods: {

// 格式化评论数据

initCommentLists() {

this.commentsList.forEach(i => {

this.$set(i, ‘children’, [])

// 将回复该评论的列表放入children中

let filterList = this.commentsList.filter(

j => j.replyId === i.commentId

)

if (filterList.length > 0) {

i.children = filterList

}

})

// 过滤出最高级

this.commentsList = this.commentsList.filter(i => i.replyId === null)

},

// 格式化文章数据

initArticleLists() {

this.articleLists.forEach(i => {

this.$set(i, ‘children’, [])

let filterList = this.commentsList.filter(

j => j.articleId === i.articleId

)

if (filterList.length > 0) {

i.children = filterList

}

})

}

}

}

my-cycle-list组件：

{{ self.userName }} 回复

<span class=“parent-username” @click=“parentClick”

{{ parent.userName }}：</span

{{ self.desc }}

{{ self.time }}

<span class=“self-username” @click=“commentUserNameClick”>

{{ self.userName }}：

{{ self.desc }}

{{ self.time }}

<my-cycle-list

v-for=“(child, index) in self.children”

:self=“child”

:parent=“self”

:key=“index”

v-if=“self.children.length >= flagNum”

class=“view-all”

@click=“viewAll”

{{ !showAll ? 查看全部 ${self.children.length} 条回复 : 收起 ${self.children.length} 条回复}}