简易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 写类方式之十
Jul 05 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
js 函数调用模式小结
Dec 26 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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 采集程序 常用函数
2008/12/18 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现读Excel写入.txt的方法
2018/04/29 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python求解正态分布置信区间教程
2019/11/20 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
党员干部廉洁承诺书
2014/05/28 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
在校证明模板
2015/06/17 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
AJAX学习笔记
2021/05/18 Javascript