上下一页禁用

最新推荐文章于 2025-06-06 16:47:17 发布

少年张狂

最新推荐文章于 2025-06-06 16:47:17 发布

阅读量459

点赞数

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_41909678/article/details/123716818

版权

这段内容描述了一个网页的分页组件实现，包括上一页和下一页的按钮。当处于第一页时，上一页按钮会被禁用；当处于最后一页时，下一页按钮会被禁用。点击按钮会触发检查当前页码并进行相应的页面跳转操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 上一页 -->
<div :class="{ disabled: nextDisabled }" @click="toPrevPage()"></div>
<!-- 下一页 -->
<div :class="{ disabled: nextDisabled }" @click="toNextPage()"></div>

.disabled {
    cursor: not-allowed;
}

conputed: {
    prevDisabled() {
        return this.currentPage === 1
    },
    nextDisabled() {
        return this.totalPage === this.currentPage
    }
}
methods: {
    toPrevPage() {
        if(this.prevDisabled) return
        this.checkItem(this.currentPage - 1)
    },
    toNextPage() {
        if(this.nextDisabled) return
        this.checkItem(this.currentPage + 1)
    }
}