怎么用vue实现分页组件

2023-07-04 13:04

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍了怎么用vue实现分页组件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用vue实现分页组件文章都会有所收获，下面我们一起来看看吧。

首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options )

var barHtml = '<div class="page-bar">'+   '<ul>'+   '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>'+   '<li v-if="cur==1"><a class="banclick">上一页</a></li>'+   '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+    '<a v-on:click="btnclick(index)">{{ index }}</a>'+   '</li>'+   '<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>'+   '<li v-if="cur == all"><a class="banclick">下一页</a></li>'+   '<li><a>共<i>{{all}}</i>页</a></li>'+   '</ul>'+  '</div>'; var navBar = Vue.extend({ template:barHtml, props:['all','cur'], computed: {  indexs: function(){  var left = 1;  var right = this.all;  var ar = [];  if(this.all>= 5){  if(this.cur > 3 && this.cur < this.all-2){   left = this.cur - 2   right = this.cur + 2  }else{   if(this.cur<=3){   left = 1   right = 5   }else{   right = this.all   left = this.all -4   }  }  }  while (left <= right){  ar.push(left)  left ++  }  return ar  }  }, methods: {  btnclick: function(data){  if(data != this.cur){   this.cur = data;   this.$emit('btn-click',data);   }  },  pageClick: function(){  this.$emit('btn-click',this.cur);  } },  }); window.pagenav = navBar;

这儿创建了一个全局的pagenav，可以在其它地方都可以调用。

html代码

<div id="page"> <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav> <p >{{msg}}</p></div>

css代码

.page-bar{ margin:40px;}ul,li{ margin: 0px; padding: 0px;}li{ list-style: none}.page-bar ul{ overflow: hidden;}.page-bar li{ float: left;}.page-bar li:first-child>a { margin-left: 0px}.page-bar a{ display: block; border: 1px solid #ddd; text-decoration: none; position: relative; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer}.page-bar a:hover{ background-color: #eee;}.page-bar a.banclick{ cursor:not-allowed;}.page-bar .active a{ color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}.page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px;}

新建一个vue对象实例

var pageBar = new Vue({ el: '#page', data: {  all: 8, //总页数  cur: 1,//当前页码  msg:'' }, components:{  'vue-nav':pagenav }, watch: {  cur: function(oldValue , newValue){  console.log('监听cur前与后的值：');  console.log(arguments);  } },  methods:{  listenDate:function(data){  this.cur = data;  this.msg = '你点击了'+data+ '页';  } } })

简单的用js封装了一下分页组件。

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta charset="utf-8"><title></title><meta name="keywords" content="" /><meta name="description" content="" /><script type="text/javascript" class="lazy" data-src="js/vue.min2.js"></script><style>.page-bar{ margin:40px;}ul,li{ margin: 0px; padding: 0px;}li{ list-style: none}.page-bar ul{ overflow: hidden;}.page-bar li{ float: left;}.page-bar li:first-child>a { margin-left: 0px}.page-bar a{ display: block; border: 1px solid #ddd; text-decoration: none; position: relative; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer}.page-bar a:hover{ background-color: #eee;}.page-bar a.banclick{ cursor:not-allowed;}.page-bar .active a{ color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}.page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px;}</style></head><body><div id="page"> <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav> <p >{{msg}}</p></div><script type="text/javascript"> var barHtml = '<div class="page-bar">'+   '<ul>'+   '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>'+   '<li v-if="cur==1"><a class="banclick">上一页</a></li>'+   '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+    '<a v-on:click="btnclick(index)">{{ index }}</a>'+   '</li>'+   '<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>'+   '<li v-if="cur == all"><a class="banclick">下一页</a></li>'+   '<li><a>共<i>{{all}}</i>页</a></li>'+   '</ul>'+  '</div>'; var navBar = Vue.extend({ template:barHtml, props:['all','cur'], computed: {  indexs: function(){  var left = 1;  var right = this.all;  var ar = [];  if(this.all>= 5){  if(this.cur > 3 && this.cur < this.all-2){   left = this.cur - 2   right = this.cur + 2  }else{   if(this.cur<=3){   left = 1   right = 5   }else{   right = this.all   left = this.all -4   }  }  }  while (left <= right){  ar.push(left)  left ++  }  return ar  }  }, methods: {  btnclick: function(data){  if(data != this.cur){   this.cur = data;   this.$emit('btn-click',data);   }  },  pageClick: function(){  this.$emit('btn-click',this.cur);  } },  }); window.pagenav = navBar; var pageBar = new Vue({ el: '#page', data: {  all: 8, //总页数  cur: 1,//当前页码  msg:'' }, components:{  'vue-nav':pagenav }, watch: {  cur: function(oldValue , newValue){  console.log('监听cur前与后的值：');  console.log(arguments);  } },  methods:{  listenDate:function(data){  this.cur = data;  this.msg = '你点击了'+data+ '页';  } } })</script></body></html>