简易Vue评论框架的实现(父组件的实现)


Posted in Javascript onJanuary 08, 2018

最近看到一个需求:

  1. 实现一个评论功能,要求对评论列表进行分页显示
  2. 对相应模块实现组件化
  3. 能显示发布者、发布时间以及内容

乍一看不是很难,但是在具体的实现上还是遇到了一些问题。此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的。

源码地址

评论表单代码:

<!-- 文档结构区开始 -->
<template>
  <div id="comment" >
    <UserDiv @transferUser="getInput" ></UserDiv>
    <CommentDiv :List="List"></CommentDiv>
    <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>
  </div>
</template>
<!-- 文档结构区结束 -->
<!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import UserDiv from './commentInput.vue'
import PageDiv from './pagination.vue'
import CommentDiv from './commentList.vue'

export default {
  //声明组件名
  name: 'comment',

  //包含实例可用组件的哈希表
  components: {
    UserDiv,
    PageDiv,
    CommentDiv
  },

  //声明组件参数
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      pagesize: 3,
      totalData: [],
      List: [],
    }
  },

  methods: {
    //显示评论列表信息的方法
    getInput(msg) {
      //将评论信息保存到评论数组里
      this.totalData.push({ text: msg })
      //计算评论信息总条数长度
      this.totalCount = this.totalData.length

      //判断评论总数是否大于单页显示条数
      if (this.totalCount <= this.pagesize) {
       // 显示所有评论
       this.List = this.totalData
      } else {
       // 截取totalData中 this.totalCount - this.pagesize 后面的元素进行显示
       this.List = this.totalData.slice(this.totalCount - this.pagesize)
      }
      //点击评论按钮,默认跳转显示第一页内容
      this.currentPage = 1
      //评论列表倒序显示,即最新评论,显示在最上面
      this.List.reverse()

    },

    // 计算评论列表每一页的显示内容
    getPage(curr, size) {
      this.currentPage = curr

      if (this.totalCount <= this.pagesize) {
        //显示所有评论
        this.List = this.totalData
      } else {
        var start = this.totalCount - this.currentPage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totalData中 [start, start + this.pagesize] 位元素进行显示
        this.List = this.totalData.slice(start, start + this.pagesize)
      }
      //评论列表倒序显示,即最新评论,显示在最上面
      this.List.reverse()
    }
  },
}
</script>
<!-- js 控制区结束 -->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 #Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 #Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 #Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 #Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 #Javascript
webpack构建的详细流程探底
Jan 08 #Javascript
详解ES6中的代理模式——Proxy
Jan 08 #Javascript
You might like
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php微信公众号开发模式详解
2016/11/28 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
如何基于python操作excel并获取内容
2019/12/24 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
学生周末回家住宿长期请假条
2014/02/15 职场文书
优秀语文教师事迹
2014/05/18 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
python区块链持久化和命令行接口实现简版
2022/05/25 Python