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