Flask接口签名sign原理与实例代码浅析
302
2023-02-28
简易Vue评论框架的实现(父组件的实现)
最近看到一个需求:
实现一个评论功能,要求对评论列表进行分页显示
对相应模块实现组件化
能显示发布者、发布时间以及内容
乍一看不是很难,但是在具体的实现上还是遇到了一些问题。此外,因为第一次使用 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: {
//显示评论列表信息的方法
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()
}
MPHvtVUUF },
}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~