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 相关文章推荐
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
angular.js分页代码的实例
Jul 27 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
JS实现纸牌发牌动画
Jan 19 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
人族 TERRAN 概述
2020/03/14 星际争霸
深入PHP magic quotes的详解
2013/06/17 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php中的异常和错误浅析
2017/05/03 PHP
php取出数组单个值的方法
2018/03/12 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python 递归函数详解及实例
2016/12/27 Python
python实现机器人行走效果
2018/01/29 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
优秀教师自我评价范文
2014/09/27 职场文书
大学生万能检讨书范例
2014/10/04 职场文书