Vue 实用分页paging实例代码


Posted in Javascript onApril 12, 2017

直接上代码。只有一个小小的需要注意的点:vue1.x的v-for循环是从0开始,遵从了程序语言设计的一贯的做法,而vue2.x是从1开始的,符合我们平常的习惯。用下来还是vue2.x的做法方便一些,不需要绕一下子了。

//html
<div id="paging">
<span v-on:click="switchPage(curPage - 1)">prev</span>
<span v-for="item in sum" v-bind:class="{'current-page': item == curPage}" v-text="item" v-on:click="switchPage(item)"></span>
<span v-on:click="switchPage(curPage + 1)">next</span>
</div>
//js
var paging = new Vue({
 el: '#paging',
 data: {
  sum: 4, //总页数
  curPage: 1, //当前页
 },
 methods: {
  getBooks: function(page){
   //页面初始化函数
  },
  switchPage: function(page){
   var vm = this;
   if(page < 1) {
    page = 1;
   } else if(page > vm.sum) {
    page = vm.sum;
   }
   vm.getBooks(page);
   vm.curPage = page;
  },
 }
})
//css
span {
 display: inline-block;
 margin: 3px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 text-align: center;
 color: pink;
 background: #fff;
 border-radius: 5px;
}
span.current-page,
span:hover {
 color: #fff;
 background: pink;
}

效果如下:

Vue 实用分页paging实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
基于JavaScript定位当前的地理位置
Apr 11 #Javascript
js模拟支付宝密码输入框
Apr 11 #Javascript
基于jQuery实现瀑布流页面
Apr 11 #jQuery
详解angular用$sce服务来过滤HTML标签
Apr 11 #Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 #Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 #Javascript
You might like
php缓存技术详细总结
2013/08/07 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
python中的全局变量用法分析
2015/06/09 Python
python验证码识别实例代码
2018/02/03 Python
python版大富翁源代码分享
2018/11/19 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python关于调用函数外的变量实例
2019/12/26 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
2019年Java 最常见的 面试题
2016/10/19 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
优秀求职信范文分享
2013/12/19 职场文书
入党转预备思想汇报
2014/01/07 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
早会主持词
2014/03/17 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
关于责任的演讲稿
2014/05/20 职场文书
西安事变观后感
2015/06/12 职场文书
2019公司管理制度
2019/04/19 职场文书