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 Array.prototype.slice使用说明
Oct 11 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
javascript中clone对象详解
Dec 03 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
Vue源码探究之状态初始化
Nov 14 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
CURL状态码列表(详细)
2013/06/27 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python:socket传输大文件示例
2017/01/18 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
P/Invoke是什么
2015/07/31 面试题
就业推荐表自我鉴定
2014/03/21 职场文书
员工工作自我评价
2014/09/26 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
逃课检讨书
2015/01/26 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书