vue实现评论功能,vue评论点赞
这篇文章主要为大家详细介绍了某视频剪辑软件实现文章评论和回复列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现文章评论和回复列表的具体代码，供大家参考，具体内容如下
效果预览：
父组件：
模板
div class=评论-回复
差异
文章列表中的v-for=(项目，索引
:key=index
文章列表
desc { item。文章desc } }/div
div v-if=item.children.length 0
reply-list v-if= item。孩子。长度0
我的自行车清单
项目.儿童中的v-for=(注释，索引
:self=comment
:parent=comment
:key=index
/我的自行车列表
/div
/div
/div
/div
/模板
脚本
从" @/组件/我的循环列表"导入myCycleList
导出默认值{
组件：{ myCycleList }，
data() {
返回{
//文章列表
文章列表：[
{ articleId:文章-1 ,文章描述：围城 },
{ articleId:文章-2 ,文章描述：骆驼祥子 },
{ articleId:文章-3 ,文章描述：边城 },
{ articleId:第四条，articleDesc:朝花夕拾 }
],
//评论列表
评论列表：[
{
用户Id:"用户1",
用户名： 赵一，
articleId:第一条,//关联的文章编号
commentId: comment-1 ，//评论编号
replyId: null，//回复哪条评论的编号
desc:’作者是谁，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户2",
用户名： 钱二，
articleId:"文章-1",
备注："注释-2",
replyId: null，
desc:’对呀，作者也不写，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户3",
用户名： 孙三，
articleId:"文章-1",
备注："注释-3",
replyId: null，
desc:’楼上俩初中没毕业吧，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户4",
用户名： 李四，
articleId:"文章-1",
备注："注释-4",
replyId:注释-1 ,
desc:’作者是钱钟书，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户-9",
用户名： 牛九，
articleId:"文章-1",
备注："注释-10",
replyId:注释-1 ,
desc:’钱钟书，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户-5",
用户名： 王五，
articleId:"第2条",
备注："注释-5",
replyId: null，
desc:’哈哈哈，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户6",
用户名： 张六，
articleId:"文章-1",
注释id:“注释-6”，
replyId:注释-4 ,
desc:’不对吧，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户7",
用户名： 顾七，
articleId:"文章-1",
备注："注释-7",
replyId:"注释-6",
desc:’对的，就是钱钟书，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户-8",
用户名： 朱八，
articleId:"第3条",
备注："注释-8",
replyId: null，
desc:’这本书真不错，
时间："2021-04-05 15:30:25"
},
{
用户Id:"用户-9",
用户名： 纪九，
articleId:"第四条",
注释id:“注释-9”，
replyId: null，
desc:’真的好看，
时间："2021-04-05 15:30:25"
}
]
}
},
已创建(){
this.initCommentLists()
this.initArticleLists()
},
方法：{
//格式化评论数据
initCommentLists() {
this.commentsList.forEach(i={
这个. $set(i， children ，[])
//将回复该评论的列表放入孩子们中
让过滤器列表=this。评论列表。过滤器(
j=j.replyId===i.commentId
)
if (filterList.length 0) {
i.children=filterList
}
})
//过滤出最高级
这个。评论列表=这个。评论列表。filter(I=I . replyid===null)
},
//格式化文章数据
initArticleLists() {
this.articleLists.forEach(i={
这个. $set(i， children ，[])
让过滤器列表=this。评论列表。过滤器(
j=j.articleId===i.articleId
)
if (filterList.length 0) {
i.children=filterList
}
})
}
}
}
/脚本
样式范围的语言=scss 。评论-回复{。文章列表{
保证金：15px。文章-desc
颜色：珊瑚色；
字体大小：26px
字体粗细：粗体；
}
}。评论列表{
边距：10px。评论{。注释-用户名{
颜色：# 999;
光标：指针；
}
}
}
}
/风格
我的自行车清单组件：
模板
div class=我的自行车列表
div class=列表
！-回复-
div v-if=self.replyId
span class= self-username“{ self。用户名} }回复/span
span class= parent-username @ click= parent click
{{家长。用户名} }:span
{{ self.desc }}
span time " { self。time } }/span
/div
！-评论-
div-否则
span class= self-username @ click= commentUserNameClick
{{ self。用户名}}:
/span
{{ self.desc }}
span time " { self。time } }/span
/div
！-递归组件-
div v-if= self。孩子。长度标志 显示全部
我的自行车清单
self .儿童中的v-for=(子级，索引
:self=child
:parent=self
:key=index
/我的自行车列表
/div
！-查看全部-
差异
自我。孩子。长度=标志号
class=查看全部
@click=viewAll
{{ !showAll？`查看全部${self.children.length}条回复` : `收起${self.children.length}条回复`}}
/div
/div
/div
/模板
脚本
从" @/组件/我的循环列表"导入myCycleList
导出默认值{
道具：[自己,父母],
组件：{ myCycleList }，
名称："我的自行车列表",
data() {
返回{
flagNum: 2，//超过多少条折叠
假的
}
},
已创建(){},
方法：{
//点击被回复的昵称事件
parentClick() {
console.log(this.parent)
},
//评论人点击事件
commentUserNameClick() {
console.log(this.self)
},
//查看/收起回复
viewAll() {
this.showAll=！this.showAll
}
}
}
/脚本
样式范围的语言=scss 。我的自行车列表{。列表{
边距：10px。自我用户名{
光标：指针；
颜色：# 999;
}。父用户名{
颜色：伯里伍德
光标：指针；
}。时间{
边距：0 10px
颜色：# 666;
字体大小：12px
}。查看全部{
边距：10px 0；
颜色：暗青色；
光标：指针；
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。