vue简单的分页功能实现二

vue简单的分页功能实现二

第二种使用vue实现分页功能的方法。

首先，data数据定义：

var vm = new Vue({
    el: '#app',
    data: {
        listArray:[
          {
              'name':'赵*',
              'age':'21',
              'edu':'本科',
              'phone':'188****888888',
              'school':'河南农业大学'
          },
          {
              'name':'钱*',
              'age':'22',
              'edu':'本科',
              'phone':'188****888888',
              'school':'郑州大学'
          },
          {
              'name':'王*',
              'age':'23',
              'edu':'大专',
              'phone':'188****888888',
              'school':'河南工业大学'
          },
          {
              'name':'张*',
              'age':'25',
              'edu':'本科',
              'phone':'188****888888',
              'school':'河南农业大学'
          },
          {
              'name':'刘*',
              'age':'21',
              'edu':'本科',
              'phone':'188****888888',
              'school':'河南理工大学'
          }
        ],
        pageSize:2,
        currentPage:0
    }
})

数据的具体分页功能使用vue的计算属性computed来实现：

computed:{
        dataShow: function(){
            let start = this.currentPage*this.pageSize;
            let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)
            return this.listArray.slice(start, end)
        },
        pageNum: function(){
            return Math.ceil(this.listArray.length / this.pageSize) || 1 ;
        }
    }

计算属性computed的优点有很多，请自行百度。

各种点击方法如下：

methods: {
        nextPage: function(){
            var vm = this;
            if (vm.currentPage == vm.pageNum - 1) return;
            vm.currentPage++;
             
        },
        prePage: function(){
            var vm = this;
            if (vm.currentPage == 0) return;
            vm.currentPage--;
            
        },
        toPage: function(page){
            var vm = this;
            vm.currentPage = page
        }
    }

前端代码：

<table>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>学历</th>
                            <th>电话</th>
                            <th>毕业院校</th>
                        </tr>
                        <tr v-for="(item, index) in dataShow" :class="{ 'alt': index%2==1 }">
                            <td>{{ item.name }}</td>
                            <td>{{ item.age }}</td>
                            <td>{{ item.edu }}</td>
                            <td>{{ item.phone }}</td>
                            <td>{{ item.school }}</td>
                        </tr>
                    </table>
                    <div class="page">
                        <ul>
                            <li>
                                <a href="#"  v-on:click="prePage">
                                    <</a>
                            </li>
                            <li v-for="(item, index) in pageNum">
                                <a href="#" v-on:click="toPage(index)" :class="{active: currentPage==index}">{{ index+1 }}</a>
                            </li>
                            <li>
                                <a href="#" v-on:click="nextPage">></a>
                            </li>
                        </ul>
                    </div>

注意：v-for可循环数据list,对象object，数值number,字符串String,迭代对象Iterable