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 源码分析笔记(7) Queue
Jun 19 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 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
html静态页面调用php文件的方法
2014/11/13 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php微信开发之关注事件
2018/06/14 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
教师岗位职责
2013/11/17 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
股东合作协议书
2014/04/14 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年党建工作总结
2015/03/30 职场文书
主持稿开场白
2015/06/01 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers