Vue 之 在当前页面的实现分页效果

目录

    • 场景
    • 实现

在这里插入图片描述

场景

假设,我们现在有这么一个需求:
上述图片的空白内容是活动的,由下面的两个按钮控制上一页、下一页;我们应该可以怎么去实现?

实现

思路:
其实这个问题,我们仿照其他的UI框架应该也可以获取大致思路,例如:element-ui;

可以将空白内容作为一个table的某一页数据,然后点击底部的分页组件的上一页或者下一页,来做到数据的切页效果。
这里使用vue element admin 中的一个综合table来看下效果图
在这里插入图片描述

这下有没有感觉顿时思路就来了
定义变量,当前页码currentPage、每页数据数量pageSize,总数据源列表dataList
点击按钮切换页码,监听页码的变化获取到当前页的数据,从而渲染到页面上。

注意点,这里建议使用计算属性computed,而不是监听属性watch,为什么?这是因为计算属性的一个特性:计算属性相比监听而言,计算属性具有缓存特性,直白的说,计算属性的依赖(也就是计算属性中所用到的变量)如果不变,那么计算属性不会被再次调用,从而进一步的提高性能。

代码如下:

<template><div><!-- 数据列表 --><ul><li v-for="item in currentPageData" :key="item.id">{{ item.content }}</li></ul><!-- 分页控件 --><button @click="prevPage" :disabled="currentPage === 1">上一页</button><button @click="nextPage" :disabled="currentPage === totalPages">下一页</button></div>
</template><script>
export default {data() {return {currentPage: 1,pageSize: 10,dataList: [], // 假设这是从服务器获取的数据列表};},computed: {totalPages() {return Math.ceil(this.dataList.length / this.pageSize);},currentPageData() {let start = (this.currentPage - 1) * this.pageSize;let end = start + this.pageSize;return this.dataList.slice(start, end);},},methods: {nextPage() {if (this.currentPage < this.totalPages) {this.currentPage++;}},prevPage() {if (this.currentPage > 1) {this.currentPage--;}},},
};
</script>


完结。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/831068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

202109青少年软件编程(Python)等级考试试卷(一级)

第 1 题 【单选题】 取整除的运算符是&#xff1f;&#xff08; &#xff09; A : / B : // C : D : ** 正确答案:B 试题解析: 第 2 题 【单选题】 下面的程序为海龟绘制正方形的程序&#xff0c; 请选择正确选项将程序补全&#xff1f;&#xff08; &#xff09; imp…

企微私域运营软件:构建高效私域流量的利器

随着互联网的快速发展&#xff0c;私域流量运营逐渐成为企业营销的重要一环。企微私域运营软件&#xff0c;作为专注于企业微信生态下的私域流量管理工具&#xff0c;为企业提供了高效、精准的用户运营和营销解决方案。本文将详细介绍企微私域运营软件的功能、特点、优势、适用…

接收区块链的CCF会议--APSEC 2024 截止7.13 附录用率

会议名称&#xff1a;APSEC&#xff08;Asia-Pacific Software Engineering Conference&#xff09; CCF等级&#xff1a;CCF C类学术会议 类别&#xff1a;软件工程/系统软件/程序设计语言 录用率&#xff1a;2023年&#xff0c;90 submissions were recommended for accep…

算法二:DOM - 将DOM节点元素转换成JSON字符串

题目&#xff1a; 将DOM节点元素转换成JSON的格式 例如 <div class"root"><div class"child1"><p></p></div><span></span><div><div><p></p></div></div><p></…

Web前端开发之CSS_2

关系选择器CSS盒子模型弹性盒子模型文档流浮动清除浮动定位 1. 关系选择器 1.1 后代选择器 E F{} 选择所有被 E 元素包含的 F 元素&#xff0c;中间用空格隔开 <ul> <li>后代列表1</li> <div> <ol> <li>后代列表2</li> </ol>…

力扣刷题第0天:只出现一次的数字

目录 第一部分:题目描述 ​第二部分:题目分析 第三部分:解决方法 3.1思路1: 双指针暴力求解 3.2 思路2&#xff1a;异或运算 第四部分:总结收获 第一部分:题目描述 第二部分:题目分析 由图片分析可得&#xff0c;该题目对算法时间复杂度有一定的要求时间复杂度为O(N)&a…

lxml 在 Windows 7上安装无法安装怎么办?

lxml 在 Windows 7上安装无法安装怎么办&#xff1f; 要在Windows 7上安装lxml&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装Python&#xff1a; 如果您的计算机尚未安装Python&#xff0c;请先安装Python。您可以从Python官方网站下载Windows安装程序&#xff0c…

MongoDB聚合运算符:$subtract

MongoDB聚合运算符&#xff1a;$subtract 文章目录 MongoDB聚合运算符&#xff1a;$subtract语法使用举例数值相减日期相减从日期减去毫秒数 $subtract聚合运算符返回两个数值的差值&#xff0c;或者返回两个日期相差的毫秒数&#xff0c;或者日期与一个毫秒数相差的日期。 语法…

知乎广告投放怎么操作?如何开通知乎广告账户?

知乎作为一个汇聚知识精英与行业领袖的问答社区&#xff0c;其独特的平台属性和高质量的用户基础&#xff0c;使之成为品牌广告投放不可忽视的一片蓝海。云衔科技通过专业化的广告开户及代运营服务&#xff0c;助力企业精准触达目标人群&#xff0c;实现品牌传播与商业目标的双…

【源码阅读】Golang中的go-sql-driver库源码探究

文章目录 前言一、go-sql-driver/mysql1、驱动注册&#xff1a;sql.Register2、驱动实现&#xff1a;MysqlDriver3、RegisterDialContext 二、总结 前言 在上篇文章中我们知道&#xff0c;database/sql只是提供了驱动相关的接口&#xff0c;并没有相关的具体实现&#xff0c;具…

2024五一杯数学建模C题思路分享 - 煤矿深部开采冲击地压危险预测

文章目录 1 赛题选题分析 2 解题思路2.1 问题重述2.2 第一问完整思路2.2 二、三问思路更新 3 最新思路更新 1 赛题 C题 煤矿深部开采冲击地压危险预测 煤炭是中国的主要能源和重要的工业原料。然而&#xff0c;随着开采深度的增加&#xff0c;地应力增大&#xff0c;井下煤岩动…

C\#工控行业中的视觉技术栈

在工控行业中&#xff0c;C#作为一种强大的编程语言&#xff0c;其在视觉技术栈中发挥着重要作用。以下是C#在工控行业视觉技术栈中的一些关键应用&#xff1a; 图像采集与处理&#xff1a; C#提供了丰富的图像采集和处理库&#xff0c;如OpenCVSharp、EmguCV等&#xff0c;可…

Git常见指令(初始化仓库,克隆仓库,添加和提交更改,查看状态和历史,分支操作,远程操作,撤销操作,打标签)

目录 1.初始化一个新的仓库2.克隆仓库到本地3.添加和提交更改4.查看状态和历史5.分支操作6.远程操作7.撤销更改8.打标签 1.初始化一个新的仓库 git init这个命令用于在当前目录中初始化一个新的 Git 仓库。执行后&#xff0c;Git 将在当前目录中创建一个新的 .git 子目录&…

Qt 配置 OpenCV

MinGW CMake 下载 OpenCV 源代码 使用 CMake 生成 OpenCV 的 Makefile // 设置源码 Where is the source code: C:\Program Files\OpenCV\source // 生成路径 C:\Program Files\OpenCV\build点击 Configure&#xff0c;设置编译器 Specify the generator for this project:…

键盘更新计划

作为 IT 搬砖人&#xff0c;一直都认为键盘没有什么太大关系。 每次都是公司发什么用什么。 但随着用几年后&#xff0c;发现现在的键盘经常出问题&#xff0c;比如说调节音量的时候通常莫名其妙的卡死&#xff0c;要不就是最大音量要不就是最小音量。 按键 M 不知道什么原因…

Java | Leetcode Java题解之第60题排列序列

题目&#xff1a; 题解&#xff1a; class Solution {public String getPermutation(int n, int k) {int[] factorial new int[n];factorial[0] 1;for (int i 1; i < n; i) {factorial[i] factorial[i - 1] * i;}--k;StringBuffer ans new StringBuffer();int[] valid…

[数据结构]———交换排序

目录 ​编辑 ​编辑 1.交换排序 第一个定义了一个名为Swap的函数 第二个三数取中 2.冒泡排序 代码解析 冒泡排序的特性总结&#xff1a; 3.快速排序 1. hoare版本 2. 挖坑法 代码解析 3. 前后指针版本 代码解析 1.交换排序 基本思想&#xff1a;所谓交换&#xff0…

等级测评等级测评是测评机构依据国家信息安全等级保护制度规定

等级测评 等级测评是测评机构依据国家信息安全等级保护制度规定&#xff0c;按照有关管理规范和技术标准&#xff0c; 对非涉及国家秘密信息系统安全等级保护状况进行检测评估的活动。 主管部门、监管机构进行监督检查 网络安全等级保护测评报告结论有几种&#xff1f; 优…

virtualbox kafka nat + host-only集群 + windows 外网 多网卡

virtualbox kafka nat + host-only集群 + windows 映射访问 kafka集群搭建背景kafka集群搭建 背景 使用virtualbox搭建kafka集群,涉及到不同网络策略的取舍 首先 桥接 网络虽说 啥都可以,但是涉及到过多ip的时候,而且还不能保证使用的ip不被占用,所以个人选择kafka虚拟机…

SpringBoot camunda

1&#xff1a;默认排他网关&#xff0c;表达式 Type:expression:${number%2000} 2: service task (系统自动执行用的最多):常用Delegate expression ${testGateWay} 举例&#xff1a; Component("testGateWay") public class TestGateWay implements JavaDelegate {…