基于vue.js的分页插件详解
|
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多，请戳 html代码：
css部分，可根据自己的实际需要进行调整： .page-bar ul,.page-bar li {
margin: 0px; padding: 0px; } .page-bar ul li { .page-bar li:first-child>a { .page-bar .active a { .page-bar i { js部分： 首先要创建一个基本组件 继而要利用computed计算页码， = 11) {
if (this.cur > 5 && this.cur < this.all - 4) {
left = this.cur - 5;
right = this.cur + 4;
} else {
if (this.cur <= 5) {
left = 1;
right = 10;
} else {
right = this.all;
left = this.all - 9;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},showLast: function() {
if (this.cur == this.all) {
return false
}
return true
},showFirst: function() {
if (this.cur == 1) {
return false
}
return true
}
}
要给 元素加v-on:click="cur++"事件，所以要在vue里加method方法： 其实到这里基本上就差不多了，但是可以优化一下，当用户触发点击事件时，页面发生改变，这时要通知其他组件做出改变。 }
} 观察了cur数据当它改变的时候，可以获取前后值。然后通知其他组件。 后期会在个人GitHub上提交完整版代码 补充效果图展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
