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 位置插件
Dec 25 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
小程序自定义轮播图圆点组件
Jun 25 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
一些实用的jQuery代码片段收集
2011/07/12 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
JS判定是否原生方法
2013/07/22 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
应用心理学个人的求职信
2013/12/08 职场文书
小学运动会班级口号
2014/06/09 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
开学典礼致辞
2015/07/29 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android