vue怎么实现评论列表
导读：本文共2365.5字符，通常情况下阅读需要8分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 案例数据使用localStorage持久性存储 全局过滤器实现时间格式化代码部分<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"conte... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。案例数据使用localStorage持久性存储 全局过滤器实现时间格式化
代码部分
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title></title><scriptsrc="../lib/vue.js"type="text/javascript"charset="utf-8"></script><linkrel="stylesheet"type="text/css"href="../node_modules/bootstrap/dist/css/bootstrap.css"rel="externalnofollow"/></head><body><divid="app"><divclass="container"><divclass="row"><divclass="col-md-6offset-md-3"><cmt-box@func="loadComments"></cmt-box><ulclass="list-group"><liclass="list-group-item"v-for="iteminlist":key="item.id"><spanclass="badgebadge-pillbadge-darkfloat-right">评论人:{{item.user}}</span><spanclass="float-right">{{item.ctime|dateFormat()}}</span>{{item.content}}</li></ul></div></div></div></div><templateid="tmpl"><div><divclass="form-group"><labelfor="comment">评论人:</label><inputtype="text"id="comment"class="form-control"v-model="user"/></div><divclass="form-group"><labelfor="commentText">评论内容:</label><textareaid="commentText"class="form-control"v-model="content"></textarea></div><divclass="form-group"><inputtype="button"value="发表评论"class="btnbtn-primary"@click="postComment"/></div></div></template><scripttype="text/javascript">//全局过滤器时间格式化//所谓的全局过滤器，就是所有的VM实例都共享的Vue.filter('dateFormat',function(dateStr,pattern=""){//根据给定的时间字符串，得到特定的时间vardt=newDate(dateStr)//yyyy-mm-ddvaryear=dt.getFullYear()varmonth=(dt.getMonth()+1).toString().padStart(2,'0')varday=dt.getDate().toString().padStart(2,'0')//return`${year}-${month}-${day}`if(pattern&&pattern.toLowerCase()==='yyyy-mm-dd'){return`${year}-${month}-${day}`}else{varhh=dt.getHours().toString().padStart(2,'0')varmm=dt.getMinutes().toString().padStart(2,'0')varss=dt.getSeconds().toString().padStart(2,'0')return`${year}-${month}-${day}${hh}:${mm}:${ss}`}})varcommentBox={data(){return{user:'',content:'',ctime:newDate()}},template:'#tmpl',methods:{postComment(){//localStorage只支持存放字符串数据，要先调用JSON.stringify//在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string），转换为一个数组对象，然后，把最新的评论，push到这个数组//如果获取到的localStorage中的评论字符串，为空不存在，则可以返回一个'[]'让JSON.parse去转换//把最新的评论列表数组，再次调用JSON.stringify转为数组字符串，然后调用localStorage.setItem()varcomment={id:Date.now(),user:this.user,content:this.content,ctime:this.ctime}//从localStorage中获取所有的评论varlist=JSON.parse(localStorage.getItem('cmts')||'[]')list.unshift(comment)//重新保存最新的评论数据localStorage.setItem('cmts',JSON.stringify(list))this.user=this.content=''this.$emit('func')}}}varvm=newVue({el:'#app',data:{list:[]},methods:{loadComments(){//从本地的localStorage中，加载评论列表varlist=JSON.parse(localStorage.getItem('cmts')||'[]')this.list=list}},components:{'cmt-box':commentBox},created(){this.loadComments()}})</script></body></html>效果图
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue怎么实现评论列表的详细内容，希望对您有所帮助，信息来源于网络。