vue实现评论列表功能
2020-05-04 07:10
1341 查看
具体代码如下所示:
<!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofollow" rel="external nofollow" > </head> <body> <div id="app"> <ul class="list-group"> <!-- 为事件绑定别称时不要使用驼峰命名 --> <box @plocalcoments="localComents"></box> <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="temp"> <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" value="发表评论" class="btn btn-primary" @click="add"> </div> </div> </template> </body> <script src="node_modules\vue\dist\vue.js"></script> <script> let commentBox = {//定义评论组件 data(){//进行数据的绑定,记住组件内的数据是一个方法 return{ user:'', content:'' } }, template:"#temp", methods:{ add(){//评论添加函数 //获取当前评论 let comment = {id:Date.now(),user:this.user,content:this.content}; //从localStorage读取列表 let list = JSON.parse(localStorage.getItem('cmts')|| '[]');//若不存在cmts则返回空数组,避免json解析出错 if(comment.user&&comment.content)//进行判空 list.unshift(comment); localStorage.setItem('cmts',JSON.stringify(list)); this.user=this.content='';//清空评论列表 //利用$emit()方法来调用父组件的方法 this.$emit('plocalcoments'); } } } let vm = new Vue({ el:"#app", data:{ list:[] }, components:{ box:commentBox }, created(){ //实例创建后加载评论 this.localComents(); }, methods:{ localComents(){ let list = localStorage.getItem('cmts'||'[]');//若不存在cmts则返回空数组,避免json解析出错 this.list = JSON.parse(list);//刷新数据 } } }); </script> </html>
<!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofollow" rel="external nofollow" > </head> <body> <div id="app"> <ul class="list-group"> <!-- 为事件绑定别称时不要使用驼峰命名 --> <box @plocalcoments="localComents"></box> <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="temp"> <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" value="发表评论" class="btn btn-primary" @click="add"> </div> </div> </template> </body> <script src="node_modules\vue\dist\vue.js"></script> <script> let commentBox = {//定义评论组件 data(){//进行数据的绑定,记住组件内的数据是一个方法 return{ user:'', content:'' } }, template:"#temp", methods:{ add(){//评论添加函数 //获取当前评论 let comment = {id:Date.now(),user:this.user,content:this.content}; //从localStorage读取列表 let list = JSON.parse(localStorage.getItem('cmts')|| '[]');//若不存在cmts则返回空数组,避免json解析出错 if(comment.user&&comment.content)//进行判空 list.unshift(comment); localStorage.setItem('cmts',JSON.stringify(list)); this.user=this.content='';//清空评论列表 //利用$emit()方法来调用父组件的方法 this.$emit('plocalcoments'); } } } let vm = new Vue({ el:"#app", data:{ list:[] }, components:{ box:commentBox }, created(){ //实例创建后加载评论 this.localComents(); }, methods:{ localComents(){ let list = localStorage.getItem('cmts'||'[]');//若不存在cmts则返回空数组,避免json解析出错 this.list = JSON.parse(list);//刷新数据 } } }); </script> </html>
效果图:
总结
以上所述是小编给大家介绍的vue实现评论列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- Vue实现商品详情页的评价列表功能
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnetList 所有评论列表的功能实现
- vue实现城市列表选择功能
- Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- VUE实现移动端列表筛选功能
- 利用AJAX实现WordPress中的文章列表及评论的分页功能
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnets 显示某个对象的评论列表的功能实现
- vue+vant实现商品列表批量倒计时功能
- vue笔记之组件案例-实现评论的发表和自动刷新列表
- Vue.js实现文章评论和回复评论功能
- Vue实现搜索 和新闻列表功能简单范例
- Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
- Vue实现一个无限加载列表功能
- 数据库存储树形结构数据:邻接列表模式实现评论回复功能
- 利用AJAX实现WordPress中的文章列表及评论的分页功能
- 利用VUE框架,实现列表分页功能
- Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
- vue.js实现用户评论、登录、注册、及修改信息功能
- Vue2.0 v-for filter列表过滤功能的实现