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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
Vue3.0的优化总结
Oct 16 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
详解JavaScript函数
2015/12/01 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python写日志文件操作类与应用示例
2019/07/01 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
提高EJB性能都有哪些技巧
2012/03/25 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
计算机大学生的自我评价
2013/10/15 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL