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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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获取YouTube视频信息的方法
2015/02/11 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JS 表单验证大全
2011/11/23 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python变量不能以数字打头详解
2016/07/06 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python3多线程操作简单示例
2018/05/22 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
房地产融资计划书
2014/01/10 职场文书
建筑个人求职信范文
2014/01/25 职场文书
经营理念口号
2014/06/21 职场文书
小学英语复习计划
2015/01/19 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
培训计划通知
2015/07/15 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB