在 Vue 中使用分頁

分頁功能透過允許使用者以較小的區塊或頁面視覺化資料來增強使用者體驗。以下介紹如何建立帶有分頁的 Vue.js 元件，以便我們一次只能查看部分資​​料。

我將首先在我們的 JavaScript 物件中逐一進行分析，然後顯示模板。

我唯一需要的本地資料是頁碼。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

對 props 來說，資料是必要的，另外我還定義了 size 這個參數來保存每一頁資料的數量的最大值。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

在methods 中，我定義了下一頁和上一頁的兩個方法：

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

我使用計算屬性值來計算一共有多少頁：

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData 就是取得過濾後的資料的計算屬性：

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

修改：一開始我使用.splice 來複製數組，但更完美的做法是使用.slice 方法，在這裡感謝Alexander Karelas。

在template 中：

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

我希望在最開始或最末尾阻止使用者按下按鈕，對於prevPage 按鈕，我加入了:disabled="pageNumber=0" 而對於nextPage 按鈕，我加入:disabled="pageNumber >= pagecount -1"。

推薦教學：《JS教學》

以上是在 Vue 中使用分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！