vue的一个分页组件的示例代码

2024-11-26 19:55:35

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。具体如下：

文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图

Getting started

import Page from './page.vue' 从目录引入该文件,在父组件注册使用

代码如下:

total：总页码
currentIndex：当前页码
listLen：页面ui要显示几个列表页
getPage： page组件把每个事件的页码发送给父组件，用来向后台发送相关请求来展示内容

about page.vue

html 部分

<ul class="item" v-show="arr.length">
    <li @click="start">首页</li>
    <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li>  上一列表页
    <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li>   点解当前列表页上一页
    <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
    <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li>  点解当前列表页下一页
    <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li>  下一列表页
    <li @click="end">尾页</li>
  </ul>

相关数据说明

data() {
  return {
   num: Number, //表示当前页码高亮
   arr: [], //页面显示的数组
   page: Number, //一页显示多少个,可以自定义,不能大于总页码
   Remainder:Number, //是否整除
   merchant:Number, // 比较总页数和page页
  };
 },
 props: {
  //分页的总数
  total: {
   type: Number,
   default: 5
  },
  //当前页
  currentIndex: {
   type: Number,
   default: 1
  },
  //一个列表页显示多少页码
  listLen:{
   type: Number,
   default: 5
  }
 },

methods 里面的相关事件，思路主要是判断当前列表页的第一项和最后一项.通过循环来该变arr成员的值

bash

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

之前用ember.js写过一个类似组件，现在基于vue2.0封装一个，方便以后用于不同项目，可以拿来直接使用.

小总结：之前也接触过ng4,发现这些相似框架排除过渡动画，页面展示都是通过后台发过来或者前端模拟的数据来渲染页面，当然这只是相通的一小部分，也是这类框架基本思想。

代码地址：https://github.com/hgchenhao/component

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于Vue.js的表格分页组件

一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
Vue分页组件实例代码

当前组件依赖bootstrap样式,使用前请先引用相关css. Vue.component('pagination', { template: `<nav aria-label="Page navigation"> <ul class="pagination"> <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click
基于vue2的table分页组件实现方法

本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa
VUE实现一个分页组件的示例

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了.从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的. 分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程. 在已知每页显示数据量pageSize以及当前页码pageIndex的情况下: 请求API,返回第一屏数据(pageSize内)以及所有
基于Vue如何封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se
基于Vue2.0的分页组件

本文实例为大家分享了Vue2.0分页组件的具体实现代码,供大家参考,具体内容如下整个示例打包了,有需要的可以下载,有不对的地方欢迎指出:vue分页组件组件部分代码: Vue.component('zpagenav', { template: `<nav class="zpagenav">` + `<ul class="page-ul">` + `<li v-bind:key="index" v-for="
一个可复用的vue分页组件

不废话,先上组件文件pages.vue: <template> <div class="pages-box" v-if="pageTotal > 0"> <ul class="pages"> <li class="pages-prev"> <a v-if="pageNow != 1" href="javascript:void(0);&q
vue2.0实现分页组件的实例代码

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template> <nav> <ul class="pagination"> <li :
使用vue.js制作分页组件

学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O
vue的一个分页组件的示例代码

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.具体如下: 文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图 Getting started import Page from './page.vue' 从目录引入该文件,在父组件注册使用复制代码代码如下: <page :total='total' :current-index="
vue 开发一个按钮组件的示例代码

最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法来达到点击提交改变按钮状态,如果不成功则取消按钮状态在src/components/ 下建一个button.vue <template>   <!-- state切换button的
使用vue实现一个电子签名组件的示例代码

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~ canvas <canvas> 标签是 HTML 5 中的新标签. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. canvas标签本身是没有绘图能力的,所有的绘制工作必须
使用Vue实现一个树组件的示例

HTML代码: <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
使用Vue3实现一个Upload组件的示例代码

通用上传组件开发开发上传组件前我们需要了解: FormData上传文件所需API dragOver文件拖拽到区域时触发 dragLeave文件离开拖动区域 drop文件移动到有效目标时首先实现一个最基本的上传流程: 基本上传流程,点击按钮选择,完成上传代码如下: <template> <div class="app-container">  <input type="file" @ch
用ES6的class模仿Vue写一个双向绑定的示例代码

本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com
VUE 记账凭证模块组件的示例代码

效果如下所示: <template> <div class="voucher-container"> <div class="voucher_header"> <div class="voucher_header_title">记账凭证</div> <div class="voucher_header_number">单据号: {{voucher.numb
jQuery从零开始做一个分页组件功能示例

本文实例讲述了jQuery从零开始做一个分页组件功能.分享给大家供大家参考,具体如下: 开始一个组件,毫无目的的写代码是一个不好的习惯,要经历分析 => 抽象 => 实现 => 应用四个阶段. 组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination 分析需求当前页码显示前后三页,以及在两端显示上一页.下一页未显示的地方用 '...'代替举个栗子: 假设总共有30页当前为第一页:1 2 3 4
基于 Vue 的树形选择组件的示例代码

本文介绍了基于 Vue 的树形选择组件.分享给大家,具体如下: 系统要求:Vue 2 基本特性完美的多级联动效果支持无限多的分级有全选.半选.不选三种状态截图展示代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="https://v1-c

vue的一个分页组件的示例代码

相关推荐

随机推荐