vuejs2.0如何实现分页组件-创新互联

这篇文章主要介绍vuejs2.0如何实现分页组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

阳原ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

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

var barHtml = ''+
   ''+
   '1">上一页'+
   '上一页'+
   ''+
    '{{ index }}'+
   ''+
   '下一页'+
   '下一页'+
   '共{{all}}页'+
   ''+
  '

'; 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代码


 
 {{msg}}

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封装了一下分页组件。

实现效果

vuejs2.0如何实现分页组件














 
 {{msg}}

重庆分公司，新征程启航

vuejs2.0如何实现分页组件-创新互联

其他资讯