如何基于vue.js实现的分页(vue.js,web开发)

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

先po上效果图：

html部分，将page作为一个单独的组件

<scripttype="text/x-template"id="page"><ulclass="pagination"><liv-show="current!=1"@click="current--&&goto(current)"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">上一页</a></li><liv-for="indexinpages"@click="goto(index)":class="{'active':current==index}":key="index"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">{{index}}</a></li><liv-show="allpage!=current&&allpage!=0"@click="current++&&goto(current++)"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">下一页</a></li></ul></script><divid="app"><page></page></div>

js部分：

<script>Vue.component("page",{template:"#page",data:function(){return{current:1,//当前页码showItem:5,//最少显示5个页码allpage:13//总共的}},computed:{pages:function(){varpag=[];if(this.current<this.showItem){//如果当前的激活的项小于要显示的条数//总页数和要显示的条数那个大就显示多少条vari=Math.min(this.showItem,this.allpage);while(i){pag.unshift(i--);}}else{//当前页数大于显示页数了varmiddle=this.current-Math.floor(this.showItem/2),//从哪里开始i=this.showItem;if(middle>(this.allpage-this.showItem)){middle=(this.allpage-this.showItem)+1}while(i--){pag.push(middle++);}}returnpag}},methods:{goto:function(index){if(index==this.current)return;this.current=index;//这里可以发送ajax请求}}})varvm=newVue({el:'#app',})</script>

css部分：

body{font-family:"SegoeUI";}li{list-style:none;}a{text-decoration:none;}.pagination{position:relative;}.paginationli{display:inline-block;margin:05px;}.paginationlia{padding:.5rem1rem;display:inline-block;border:1pxsolid#ddd;background:#fff;color:#0E90D2;}.paginationlia:hover{background:#eee;}.paginationli.activea{background:#0E90D2;color:#fff;}