首先画出简单的界面如下：

说说我的思路：由于是为了去练习组件之间传值，所以将页面上的写评论部分写在了子组件中，然后在然后然后子组件点击发表将数据传递给父组件的data,再由父组件来渲染评论社区的页面。

1.先主实例的data中写一个固定的评论列表，然后在页面上利用v-for来渲染实现页面效果。

2.在模板中定义一个方法publishctx，用来发表数据，但是如何拿到评论人和评论内容呢？

2.1运用v-model来动态绑定数据。

2.2在方法中定义一个对象，用来存放拿到到数据。

2.3利用localstorage来实现本地存储和数据的获取。将从local'storage中获取到的数据转化成对象格式放入list中，覆盖原有的list.然后重新把数据保存在本地。这里只是实现了本地存储，而页面上如何拿到发表的数据，且看下一步。

3.现在需要在实例对象中定义一个方法localComment()，从本地存储localstorage中来获得数据列表，并将拿到的数据列表覆盖原有的列表。然后在created中调用这个方法实现页面渲染的效果。但是呢？这一步当你点击发表后，并不会立即在页面上出现你发表的内容，你需要手动更新数据，这显然是不合理的。

所以需要在子组件的publishctx方法中调用localComment方法。这里就涉及了子组件调用父组件的方法。

在父组件中绑定方法：localComment，在子组件中利用this.$emit()来调用。

下面是详细代码区域，有问题欢迎提问。前端小白学习路~~~

<div id="app" style="padding: 20px"><comts @func="localComment"></comts><h3>评论社区：</h3><ul class="list-group"><li class="list-group-item" v-for="item in list"><span class="badge">{{item.id|dataformat('')}}：{{item.name}}</span>{{item.content}}</li></ul>
</div>
<template id="tmp1"><div><form role="form"><div class="form-group"><label for="name">评论人:</label><br><div class="col-lg-8"><input type="text" class="form-control" placeholder="请输入..." v-model="name"></div></div><br><div class="form-group"><label for="content">评论内容:</label><textarea class="form-control" rows="3" v-model="content"></textarea></div></form><input type="button" value="发表" class="btn btn-primary" @click="publishctx"></div>
</template>
<script>
//这个全局过滤器用来过滤时间，将时间转换成我们经常看的形式：yyyy-mm-ddVue.filter('dataformat',function(datastr,pattern){var dt=new Date(datastr);var y=dt.getFullYear();var m=(dt.getMonth()+1).toString().padStart(2,'0');var d=dt.getDate().toString().padStart(2,'0');if(pattern.toLocaleLowerCase()=='yyyy-mm-dd'){return `${y}-${m}-${d}`;}else{var hh=dt.getHours();var mm=dt.getMinutes();var ss=dt.getSeconds();return`${y}-${m}-${d} ${hh}:${mm}:${ss}`;}})
//这一部分是子组件，var commentBox={data:function(){return{name:'',content:'',}},template:'#tmp1',methods:{publishctx(){var comment={id:Date.now(),name:this.name,content:this.content};//从Localstorage获取到数据var list=JSON.parse(localStorage.getItem('ctx')||'[]');//把拿到的数据放在放入list中list.unshift(comment);//重新把评论数据保存在本地localStorage.setItem('ctx',JSON.stringify(list));//清空数据this.name=this.content='';this.$emit('func');}}};var vm=new Vue({el:'#app',data:{list:[{id:'Date.now()',name:'李白',content:'抽刀断水水更流'},{id:'Date.now()',name:'孟浩然',content:'千里江陵一日还'},]},created:function(){return this.localComment();},methods:{localComment(){//从本地的localstorage中加载评论列表var list=JSON.parse(localStorage.getItem('ctx')||'[]');this.list=list;}},components:{'comts':commentBox},})
</script>

vue组件实现发表评论功能（localStorage）相关推荐

vue组件案例----发表评论功能
页面展示 1.引入样式bootstrap.css和vue.js文件 <link rel="stylesheet" href="../bootsrtrap/css/b ...
【vue】vue组件发表评论功能
今天看了vue相关的视频,所以跟着做一个小demo把知识串联起来,内容很简单但是也算是学习道路上的一点进步. 1 思路分析发表评论模块写入一个组件,提高复用性. 关键点: 子组件通过localSto ...
【Vue实例四】利用Vue组件实现添加评论的功能
前面学到了Vue的组件功能,本文我们通过一个评论列表的案例来巩固下组件的内容,具体效果如下: <!DOCTYPE html> <html lang="en"> ...
【Javascript】进阶之实现评论分页与发表评论功能
描述:实现评论分页与发表评论 1.评论分页,通过上一页.下一页和输入页数跳转 2.发表评论是需要先判断是否登录,登录后显示个人中心和退出,再发表评论,如果选择匿名评论,则显示匿名代码实现 HTML ...
小程序发表评论功能
工作日志随手笔记仅供参考 1.点击发表按钮判断内容是否为空如果为空提示请输入内容 2.如果内容不为空将评论框里输入的内容的值传入评论列表 <view wx:for="{{ ...
基于vue练习demo：发表评论案例 (使用localStorage存储数据)
前言最近在学习 VUE的相关知识,之前学习html和css3和原生js及jq库时感觉还挺轻松,但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router,vue-cli,webpac ...
vue.js实现带表情评论功能前后端实现（仿B站评论）
文章目录学习链接效果图后台建表评论表(重要) 用户表实体类 Comment User CommentDTO(重要) WebConfig配置配置跨域和静态资源文件夹 Mybatisplus ...
vue+springboot _实现评论留言功能
第一种:多级评论(递归):需要注意组件传值问题利用Vue+ElementUi实现评论功能-仿掘金_zLanaDelRey的博客-CSDN博客_vue实现评论功能第二种:两级评论,注意组件传值问题 ...
Vue+SpringBoot实现评论功能
目录前言难点实现思路数据表设计数据传输格式设计前端递归显示删除评论前言评论系统相信大家并不陌生,在社交网络相关的软件中是一种常见的功能.然而对于初学者来说,实现一个完整的评论系统并不 ...

vue组件实现发表评论功能（localStorage）

首先画出简单的界面如下：

说说我的思路：由于是为了去练习组件之间传值，所以将页面上的写评论部分写在了子组件中，然后在然后然后子组件点击发表将数据传递给父组件的data,再由父组件来渲染评论社区的页面。

1.先主实例的data中写一个固定的评论列表，然后在页面上利用v-for来渲染实现页面效果。

2.在模板中定义一个方法publishctx，用来发表数据，但是如何拿到评论人和评论内容呢？

2.1运用v-model来动态绑定数据。

2.2在方法中定义一个对象，用来存放拿到到数据。

2.3利用localstorage来实现本地存储和数据的获取。将从local'storage中获取到的数据转化成对象格式放入list中，覆盖原有的list.然后重新把数据保存在本地。这里只是实现了本地存储，而页面上如何拿到发表的数据，且看下一步。

所以需要在子组件的publishctx方法中调用localComment方法。这里就涉及了子组件调用父组件的方法。

在父组件中绑定方法：localComment，在子组件中利用this.$emit()来调用。

下面是详细代码区域，有问题欢迎提问。前端小白学习路~~~

vue组件实现发表评论功能（localStorage）相关推荐

最新文章

热门文章