简易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 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
JavaScript如何判断input数据类型
Feb 06 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实现多条件查询实例代码
2010/07/17 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
英语专业毕业生自我鉴定
2013/11/09 职场文书
企业法人代表任命书
2014/06/06 职场文书
罚站检讨书
2015/01/29 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2016年情人节问候语
2015/11/11 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS