Vue에서 페이지 매김 사용

페이지 매김 기능은 사용자가 데이터를 더 작은 청크나 페이지로 시각화할 수 있도록 하여 사용자 경험을 향상시킵니다. 한 번에 데이터의 일부만 볼 수 있도록 페이지 매김을 사용하여 Vue.js 구성 요소를 만드는 방법은 다음과 같습니다.

먼저 JavaScript 개체를 하나씩 살펴보고 템플릿을 표시하겠습니다.

나에게 필요한 유일한 로컬 데이터는 페이지 번호입니다.

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

소품에는 데이터가 꼭 필요합니다. 또한 각 페이지에 최대량의 데이터를 저장하기 위해 크기 매개변수도 정의했습니다.

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

메서드에서 다음 페이지와 이전 페이지에 대해 두 가지 메서드를 정의했습니다.

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);
}

Edit: 처음에는 .splice를 사용하여 배열을 복사했지만 더 완벽한 방법은 Alexander Karelas 덕분에 .slice 메서드를 사용하는 것입니다.

템플릿에서:

<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 버튼에 다음을 추가했습니다: 비활성화="pageNumber=0" 그리고 nextPage 버튼에: 비활성화됨 ="페이지 번호 >= 페이지 수 -1".

추천 튜토리얼: "JS Tutorial"

위 내용은 Vue에서 페이지 매김 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!