How to realize the comment function of vue

今天小编给大家分享一下vue怎么实现发表评论功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

具体代码如下：

评论人{{item.user}} {{item.content}} 评论人： 评论内容： var com={ template:'#tmp1', data(){ return{ user:'', content:'' } }, methods:{ postComment(){ //得到的先摆出来 var comments={id:Date.now(),user:this.user,content:this.content} //获取之前列表所有的内容,由字符串形式转换成对象形式 var list=JSON.parse(localStorage.getItem('cmt')||'[]') //往list列表里面追加 list.unshift(comments) //然后存到localStorage里面去,转化为字符串形式 localStorage.setItem('cmt',JSON.stringify(list)) this.user=this.content='' this.$emit('func') } } } // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list:[ {id:Date.now(),user:'小小',content:'天生我材必有用'}, {id:Date.now(),user:'小小1',content:'天生我材'}, ] }, //使用生命周期函数,created函数已经把data和methods创建好了,必须用this //需要自动刷新,所以要用到父组件为子组件传递方法 created(){ this.show() }, methods: { show(){ //显示,先获取localStorage的内容,转为对象 var list=JSON.parse(localStorage.getItem('cmt')||'[]') this.list=list } }, components:{ 'ctm':com } })

效果图

以上就是"vue怎么实现发表评论功能"这篇文章的所有内容，感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。