本文实例为大家分享了vue.js实现表单排序和分页的具体代码，供大家参考，具体内容如下

！DOCTYPE html html head meta charset=' UTF-8 '脚本src='http:/lib/vue。量滴js ' type=' text/JavaScript '/脚本标题表格组件/title/head body div id=' app ' my div v-bind : info=' info ' v-bind : header=' header ' v-bind : num=' num ' v-bind : page=' page '/my div/div脚本类型='text/x-template' id='mysc' div表tr th v-for=' x in header ' v-: click=' bit(x)' { { x . key } }/th/tr tr tr上一页/button button v-:点击='下一页'下一页/按钮/div/脚本脚本类型=' text/JavaScript ' vue。组件(' mydiv '，{ template:'#mysc '，prop : {/*属性不能用驼峰命名法*/info:Array，header:Array，num:Number，page:Number，boolen:Boolean，调条：String }，data : function(){ return } }，computed : { fenye : function(){/*排序*/var list=this。信息；var paixu=这个。调剑；for(var I=1；ilist . lengthi){ for(var j=0；jlist。长度-I；j){ if(这个。boolen){ if(list[j][paixu]list[j 1][paixu]){ var k=list[j 1]；list[j 1]=list[j]；list[j]=k；} } else { if(list[j][paixu]list[j 1][paixu]){ var k；k=list[j]；list[j]=list[j 1]；list[j 1]=k；} } } } /*分页*/var列表2=[]；var start=this。num *(这个。第1页)；var end=start this.numif(end list。长度){ for(var I=start；iendI){列表2。push(list[I]))} } else { for(var I=start；ilist . lengthi){ list 2 . push(list[I])} }返回清单2；} }，方法： { bit : function(x){ this。boolen=！这个boolenthis。调剑=x .名称；}，LastPage : FuncTion(){控制台。日志(这个。num)如果(这个。第1页){这个。page=this。第1页；} }，下页： function(){ var page num=this。信息。长度/这个。数量；如果(这个。页码){这。page=this。第1页；} } })var phone=new Vue({ El : ' # app '，data:{ boolen:true，num:5，page:1，info:[]，header:[{ key: '名称，name:'name' }，key: '价格，名称： '价格' },关键字： '数量，名称为：'num' }] })为(var I=0；i22i){ phone . info . push({ name : '手机I，num:i，价格：100 * I })控制台。日志(111)}/脚本/正文/html效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。