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

更新时间：2017年08月09日 14:15:05 作者：涉水的小菜叽

这篇文章主要为大家详细介绍了vue.js框架实现表单排序和分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://9i0i.com/pic.php?p=../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+Node.js+WebSocket实现即时通讯
本文主要介绍了Vue+Node.js+WebSocket实现即时通讯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue如何解决空格和空行报错的问题
这篇文章主要介绍了vue如何解决空格和空行报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue?基于?vuedraggable?实现选中、拖拽、排序效果
这篇文章主要介绍了Vue?基于?vuedraggable?实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
解决vue语法会有延迟加载显现{{xxx}}的问题
今天小编就为大家分享一篇解决vue语法会有延迟加载显现{{xxx}}的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue2实现全局水印效果的示例代码
这篇文章主要为大家学习介绍了如何利用Vue2实现全局水印的效果，文中的示例代码简洁易懂，具有一定的借鉴价值，感兴趣的小伙伴可以了解下
2023-07-07
Vue3为什么这么快
这篇文章主要介绍了Vue3为什么这么快,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
Vue + AnimeJS实现3d轮播图的详细代码
轮播图在开发中是经常用到的,3D轮播图是其中最常用的一种,所以在这篇文章中将给大家介绍Vue + AnimeJS实现3d轮播图,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2024-01-01
vue中的循环对象属性和属性值用法
这篇文章主要介绍了vue中的循环对象属性和属性值用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中子组件传递数据给父组件的讲解
今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue开发中遇到的跨域问题及解决方法
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。
2020-02-02