vue移动端评论组件,vue实现评论与回复功能
这篇文章主要为大家详细介绍了某视频剪辑软件组件实现评论区功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件组件实现评论区的具体代码，供大家参考，具体内容如下
实现代码
！声明文档类型
html lang=en
头
meta charset=utf-8
meta name= viewport content= width=device-width，inital-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题评论/标题
脚本src= vue。js /脚本
link rel=样式表 href= bootstrap。量滴 CSS
/头
身体
div id=应用程序
CMT盒子@ func=加载评论/CMT盒子
ul class=列表组
list-group-item v-for= item in list :key= item。id
span class=徽章评论人：{{ item.user }}/span
{{ item.content }}
/李
/ul
/div
模板id=tmpl
差异
div class=窗体-组
标签评论人：/标签
输入类型= text class= form-control v-model= user
/div
div class=窗体-组
标签评论内容：/标签
textarea class= form-control v-model= content /textarea
/div
div class=窗体-组
输入类型=按钮值=发表评论 BTN BTN小学 @ click=发表评论
/div
/div
/模板
脚本
var commentBox={
模板：" #tmpl "，
data() {
返回{
用户： ,
内容：""
}
},
方法：{
后置评论(){
var comment={id: Date.now()，用户：this.user内容：this.content }
var list=JSON。解析(本地存储。getitem( cmts ) [])
list.unshift(注释)
localStorage.setItem(cmts ，JSON.stringify(list))
this.user=this.content=
这个emit(func )
}
}
}
var vm=new Vue({
埃尔： #app ，
数据：{
列表：[
{ time: Date.now()，用户： 路人甲，内容： 武汉加油 },
{ time: Date.now()，用户： 炮灰乙，内容： 中国加油 },
{ time: Date.now()，用户： 小兵丙，内容： 广东加油 },
{ time: Date.now()，用户： 土匪丁，内容： 全球加油 }
]
},
已创建(){
this.loadComments()
},
方法：{
loadComments(){
var list=JSON。解析(本地存储。getitem( cmts ) [])
这个列表=列表
}
},
组件：{
“cmt-box”:注释框
}
});
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。