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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
javascript中clone对象详解
Dec 03 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
javascript 用函数实现继承详解
May 28 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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 冒泡排序算法的实现代码
2010/08/08 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python logging 日志的级别调整方式
2020/02/21 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
公司成立感言
2014/01/11 职场文书
给领导的检讨书
2014/02/16 职场文书
精彩广告词大全
2014/03/19 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
科学育儿宣传标语
2014/10/08 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL