vue实现评论列表功能


Posted in Javascript onOctober 25, 2019

具体代码如下所示:

<!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实现评论列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
javascript页面倒计时实例
Jul 25 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
用vue设计一个日历表
Dec 03 Vue.js
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 #Javascript
浅谈layui 表单元素的选中问题
Oct 25 #Javascript
layUI的验证码功能及校验实例
Oct 25 #Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 #Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
You might like
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
浅析python中的del用法
2020/09/02 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
2013年军训通讯稿
2014/02/05 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
西式婚礼主持词
2014/03/13 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers