今天小编给大家分享一下Vue怎么实现发表评论功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。具体代码如下：<!DOC
今天小编给大家分享一下Vue怎么实现发表评论功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
具体代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-3.3.7.CSS" rel="external nofollow" /> <title></title> </head> <script src="vue-2.4.0.js"></script> <body> <div id="app"> <ctm @func="show"></ctm> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item.id"> <span class="badge">评论人{{item.user}}</span> {{item.content}} </li> </ul> </div> <template id="tmp1"> <div> <div class="fORM-group"> <label>评论人：</label> <input type="text" class="form-control" v-model="user"/> </div> <div class="form-group"> <label>评论内容：</label> <textarea class="form-control" v-model="content"></textarea> </div> <div class="form-group"> <input type="button" class="btn-primary" value="发表评论" @click="postComment"/> </div> </div> </template> <script> 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 } }) </script> </body></html>效果图
以上就是“vue怎么实现发表评论功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。
--结束END--
本文标题: vue怎么实现发表评论功能
本文链接: https://www.lsjlt.com/news/327158.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0