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 相关文章推荐
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
vue引入静态js文件的方法
Jun 20 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比较两个字符串长度的方法
2015/07/13 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
python实现udp聊天窗口
2020/03/31 Python
python要安装在哪个盘
2020/06/15 Python
Python用Jira库来操作Jira
2020/12/28 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
英语系毕业生自荐信
2013/10/31 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
导师对论文的学术评语
2015/01/04 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python