vue.js框架实现表单排序和分页效果


Posted in Javascript onAugust 09, 2017

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="../lib/vue.min.js" type="text/javascript"></script>
  <title>表格组件</title>
 </head>
 <body>
  <div id="app">
   <mydiv v-bind:info="info" v-bind:header="header" v-bind:num="num" v-bind:page="page"></mydiv>
  </div>
  <script type="text/x-template" id="mysc">
   <div>
    <table>
     <tr>
      <th v-for='x in header' v-on:click="bit(x)">{{x.key}}</th>
     </tr>
     <tr v-for="y in fenye">
      <th v-for="x in header">{{y[x.name]}}</th>
     </tr>
    </table>
    <button v-on:click="lastPage">上一页</button>   
    <button v-on:click="nextPage">下一页</button>  
   </div>
  </script>
  <script type="text/javascript">
   Vue.component('mydiv',{
    template:'#mysc',
    props:{
     /*属性不能用驼峰命名法*/
     info:Array,
     header:Array,
     num:Number,
     page:Number,
     boolen:Boolean,
     tiaojian:String
    },
    data: function() {
     return {}
    },
    computed:{
     fenye:function(){
      /*排序*/
      var list=this.info;
      var paixu=this.tiaojian;
       for(var i = 1;i<list.length;i++){
        for(var j=0;j<list.length-i;j++){
         if(this.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 list2 = [];
      var start= this.num*(this.page-1);
      var end=start+this.num;
      if(end<list.length){
       for(var i =start;i<end;i++){
        list2.push(list[i])
       }
      }else{
       for(var i =start;i<list.length;i++){
        list2.push(list[i])
       }
      }
      return list2;
     }
    },
    methods:{
     bit:function(x){
      this.boolen=!this.boolen;
      this.tiaojian=x.name;      
     },
     lastPage:function(){
      console.log(this.num)
      if(this.page > 1) {
       this.page = this.page - 1;
      }
     },
     nextPage: function() {
      var pageNum = this.info.length / this.num;
      if(this.page < pageNum) {
       this.page = this.page + 1;
      }
     }
    }
   })

   var phone=new Vue({
    el:'#app',
    data:{
     boolen:true,
     num:5,
     page:1,
     info:[],
     header:[{
      key: '名称',
      name:'name'
     }, {
      key: '价格',
      name:'price'
     }, {
      key: '数量',
      name:'num'
     }]
    }
   })
   for(var i = 0;i<22;i++){
     phone.info.push({
     name:'手机'+i,
     num:i,
     price:100*i
     })
     console.log(111)
   }
  </script>
 </body>
</html>

效果图:

vue.js框架实现表单排序和分页效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
javascript复制对象使用说明
Jun 28 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 #Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
vue 打包后的文件部署到express服务器上的方法
Aug 09 #Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 #Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 #Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 #Javascript
You might like
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php+highchats生成动态统计图
2014/05/21 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Javascript 对象的解释
2008/11/24 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
python 图片验证码代码
2008/12/07 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
学生打架检讨书1000字
2014/01/16 职场文书
征婚广告词
2014/03/17 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
道德演讲稿
2014/05/21 职场文书
五年级学生期末评语
2014/12/26 职场文书
优秀党员个人总结
2015/02/14 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android