未分类

www6766com基于vue.js的分页插件详解_vue.js_脚本之家

25 3月 , 2020  

Vue.js 的指标是经过尽或许简单的 API
达成响应的数额绑定和组成的视图组件。想打听越来越多,请戳

    <<   {{index}}   >> 共{{all}}页   

css部分,可依据自身的其实要求开展调治:

.page-bar { margin-top: 21px; margin-left: 11%; } .page-bar ul, .page-bar li { margin: 0px; padding: 0px; } .page-bar ul li { list-style: none; border: 1px solid #ddd; text-decoration: none; position: relative; float: left; text-align: center; padding: 1px 0; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer; width: 8%; } .page-bar li:first-child>a { margin-left: 0px } .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; } 

www6766com基于vue.js的分页插件详解_vue.js_脚本之家。率先要开创二个着力组件

var vm = new Vue({ el: 'body', data: { list: null, all: 1, //总页数 cur: 1, //当前页码 }, 

随时要使用computed总结页码,

 computed: { indexs: function { var left = 1; var right = this.all; var ar = []; if  { if (this.cur > 5 && this.cur < this.all - 4) { left = this.cur - 5; right = this.cur + 4; } else { if  { left = 1; right = 10; } else { right = this.all; left = this.all - 9; } } } while  { ar.push; left++; } return ar; }, showLast: function() { if  { return false } return true }, showFirst: function() { if  { return false } return true } } 

要给 成分加v-on:click=”cur++”事件,所以要在vue里加method方法:

methods: { btnClick: function { //页码点击事件 if  { this.cur = items } } }, 

实际到此处大概就大约了,但是能够优化一下,当客户触发点击事件时,页面发生变动,那时要文告别的构件做出改造。

 watch: { cur: function { console.log } } 

考查了cur数据当它改换的时候,能够博得前后值。然后通告别的零器件。

最后会在个体GitHub上交给完整版代码

如上正是本文的全部内容,希望对大家的就学抱有助于,也可望大家多多指教脚本之家。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图