Vue 实用分页paging实例代码
2017-04-12 08:27
405 查看
直接上代码。只有一个小小的需要注意的点: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; }
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 非常实用的Junit3与Junit4 测试 以及两者平滑过渡(高兼容性)实例代码
- matlab绘制实用日历实例代码
- 使用 Vue.js 仿百度搜索框的实例代码
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- vue2.0全家桶项目实用代码片段
- 实用PHP代码二十一个实例
- vue.js加载新的内容(实例代码)
- vue调用高德地图实例代码
- Vue分页组件实例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- 20个实用PHP实例代码
- Vue表单实例代码
- 关于JAVA中事件分发和监听机制实现的代码实例-绝对原创实用
- Ajax的简单实用实例代码
- vue图片加载与显示默认图片实例代码
- Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】
- 基于jQuery实现美观且实用的倒计时实例代码
- vue.js实现仿原生ios时间选择组件实例代码
- vue.js 左侧二级菜单显示与隐藏切换的实例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)