简易Vue评论框架的实现(父组件的实现)
时间:2019-04-12
本文章向大家介绍简易Vue评论框架的实现(父组件的实现),主要包括简易Vue评论框架的实现(父组件的实现)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近看到一个需求:
- 实现一个评论功能,要求对评论列表进行分页显示
- 对相应模块实现组件化
- 能显示发布者、发布时间以及内容
乍一看不是很难,但是在具体的实现上还是遇到了一些问题。此外,因为第一次使用 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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux如何查看端口被占用情况?Windows如何查看端口被占用情况?
- centos7安装Docker详细步骤(无坑版教程)
- Java的Object类详解(入门必备)
- Java的包机制以及import、static import的用法详解(看这篇就够了)
- AIM2020 Efficient Super Resolution: Methods and Results
- hive的group by与distinct的区别及性能测试比较
- hive的order by操作
- centos安装mysql-server报错:No package mysql-server available.
- Java的内部类详解(结合代码全面分析)
- jdk8安装及环境变量配置
- 使用MA Anderson御用软件SpliceSeq对TCGA数据库的RNA-seq找可变剪切
- Tomcat9安装配置、服务配置开机自启动以及启动窗口的中文乱码问题解决
- Java的System.exit()详解
- Hadoop伪分布式搭建(hadoop2.x通用)
- R语言tryCatch使用方法:判断Warning和Error