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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
jquery垂直公告滚动实现代码
2013/12/08 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python文件及目录操作实例详解
2015/06/04 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python+opencv实现车道线检测
2021/02/19 Python
python推导式的使用方法实例
2021/02/28 Python
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
盛大笔试题
2016/11/05 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
自荐信不宜过于夸大
2013/11/06 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
收入证明申请书
2015/06/12 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
导游词之青城山景区
2019/09/27 职场文书
python数字类型和占位符详情
2022/03/13 Python