vue 评论回复,vue评论组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现评论列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现评论列表的具体代码，供大家参考，具体内容如下
案例数据使用本地存储持久性存储全局过滤器实现时间格式化
代码部分
！声明文档类型
html lang=zh
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题/标题
脚本src=./lib/vue。js type= text/JavaScript charset= utf-8 /script
链接版本=样式表type=text/css href=./node _ modules/bootstrap/dist/CSS/bootstrap。CSS /
/头
身体
div id=应用程序
div class=容器
div class=row
div class=col-md-6 offset-md-3
CMT盒子@ func=加载评论/CMT盒子
ul class=列表组
list-group-item v-for= item in list :key= item。id
徽章徽章-药丸徽章-黑暗浮动-右评论人：{{item.user}}/span
span class= float-right style= position:relative；右：60px“{ item。ctime date format()} }/span
{{item.content}}
/李
/ul
/div
/div
/div
/div
模板id=tmpl
差异
div class=窗体-组
=注释的标签评论人：/标签
input type= text id= comment class= form-control v-model= user /
/div
div class=窗体-组
=commentText 的标签评论内容：/标签
textarea id=注释文本 class= form-control v-model= content
/textarea
/div
div class=窗体-组
输入类型=按钮值=发表评论 BTN BTN小学 @ click=发表评论/
/div
/div
/模板
脚本类型=文本/javascript
//全局过滤器时间格式化
//所谓的全局过滤器，就是所有的伏特计实例都共享的
Vue.filter(dateFormat ，function(dateStr，pattern=){
//根据给定的时间字符串，得到特定的时间
var dt=新日期
//yyyy-mm-dd
var year=dt.getFullYear()
var month=(dt.getMonth() 1).toString().padStart(2，“0”)
var day=dt.getDate().toString().padStart(2，“0”)
//返回` ${year}-${month}-${day}
如果(模式模式。tolowercase()==== yyyy-mm-DD ){
返回" $ {年}-$ {月}-$ {日} "
}否则{
var hh=dt.getHours().toString().padStart(2，“0”)
var mm=dt.getMinutes().toString().padStart(2，“0”)
var ss=dt.getSeconds().toString().padStart(2，“0”)
return ` $ { year }-$ { month }-$ { day } $ { hh }:$ { mm }:$ { ss } `
}
})
var commentBox={
data() {
返回{
用户： ,
内容： ,
ctime:新日期()
}
},
模板：" #tmpl "，
方法：{
后置注释(){
//本地存储只支持存放字符串数据，要先调用JSON.stringify
//在保存最新的评论数据之前，要先从本地存储获取到之前的评论数据（字符串),转换为一个数组对象，然后，把最新的评论，推到这个数组
//如果获取到的本地存储中的评论字符串，为空不存在，则可以返回一个[] 让JSON.parse去转换
//把最新的评论列表数组，再次调用JSON.stringify转为数组字符串，然后调用localStorage.setItem()
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 ，
数据：{
列表：[]
},
方法：{
loadComments() {
//从本地的本地存储中，加载评论列表
var list=JSON。解析(本地存储。getitem( cmts ) [])
这个列表=列表
}
},
组件：{
“cmt-box”:注释框
},
已创建(){
this.loadComments()
}
})
/脚本
/body
/html
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。