Vue2.0实现简单分页及跳转效果

前端  /  管理员 发布于 5年前   637

用Vue2.0实现一个数据的分页及页数的跳转，代码如下：

• 数据绑定：{{...}}        {{item}}
• 事件绑定：v-on        上一页
• 判断：v-if                
• 上一页
• 循环：v-for             
• 修改样式：v-bind绑定class属性       

HTML代码如下：

 
 
 
  上一页 
 
  上一页 
 
  {{item}} 
 
  下一页 
 
  下一页 
 
共{{all}}页
 
  跳转  

js代码如下：

 new Vue({ el: '#page-break', data: { cur: 1, all: 20 }, watch: { cur: function(newValue, oldValue){ console.log(arguments); } }, methods: { btnClick(num){ if(num!=this.cur){ this.cur=num; } }, pageClick(){ console.log('现在是'+this.cur+'页') }, pageSkip(){ var maxPage = this.all; var skipPage = Number(document.getElementsByClassName("jumppage")[0].value); console.log(typeof skipPage); if(!skipPage){ alert("请输入跳转页码"); return; }else if(skipPage<1 || skipPage>maxPage){ alert("您输入的页码超过页数范围了！"); return; }else{ //this.cur=skipPage; this.btnClick(skipPage); this.pageClick(); } } }, computed: { indexs(){ var left = 1; var right = this.all; var arr = []; if(this.all>=7){ if(this.cur>4 && this.cur
分页显示如下：
 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
                                                                        
您可能感兴趣的文章:
Vue form 表单提交+ajax异步请求+分页效果
利用vue + element实现表格分页和前端搜索的方法
基于Vue.js的表格分页组件
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
vuejs2.0实现一个简单的分页示例
Vue.js实现无限加载与分页功能开发
Vue+element-ui 实现表格的分页功能示例
用Vue写一个分页器的示例代码
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
vue.js表格分页示例