简易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 相关文章推荐
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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按百分比生成缩略图的代码分享
2014/05/10 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
JavaScript事件列表解说
2006/12/22 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
js前端导出Excel的方法
2017/11/01 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python学习必备知识汇总
2017/09/08 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
几个MySql的面试题
2013/04/22 面试题
行政人员岗位职责
2013/12/08 职场文书
四风问题对照检查材料
2014/09/22 职场文书
先进典型事迹材料
2014/12/29 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
python tkinter实现定时关机
2021/04/21 Python
PyTorch中permute的使用方法
2022/04/26 Python