简易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 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 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 命令行参数详解及应用
2011/05/18 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
python exit出错原因整理
2020/08/31 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
药品采购员岗位职责
2014/02/08 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis