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 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
Javascript的表单验证长度
Mar 16 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
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
php adodb操作mysql数据库
2009/03/19 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
js身份证验证超强脚本
2008/10/26 Javascript
javascript 写类方式之六
2009/07/05 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python中import学习备忘笔记
2017/01/24 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
四议两公开实施方案
2014/03/28 职场文书
母校寄语大全
2014/04/10 职场文书
教师考核材料
2014/05/21 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android