vue 倒序 实现_简易Vue评论框架的实现(父组件的实现)

本文介绍了一个使用Vue实现评论功能的案例,包括评论列表的分页显示、组件化实现,以及如何显示发布者、发布时间和内容。通过在`getInput`和`getPage`方法中处理数据,确保评论倒序显示,即最新评论在顶部。同时,展示了如何在Vue组件中导入并使用子组件。
摘要由CSDN通过智能技术生成

最近看到一个需求:

实现一个评论功能,要求对评论列表进行分页显示

对相应模块实现组件化

能显示发布者、发布时间以及内容

乍一看不是很难,但是在具体的实现上还是遇到了一些问题。此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的。

评论表单代码:

//引入组件 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: {

//显示评论列表信息的方法

getInp

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值