Vue Pagination 사용 방법

Pagination은 큰 데이터 세트를 작은 페이지로 나누어 성능 및 사용자 경험을 향상시키는 기술입니다. VUE에서 다음 내장 방법을 사용하여 페이징에 사용할 수 있습니다. 총 페이지 수를 계산하십시오 : TotalPages () 트래버스 페이지 번호 : V-FOR Directive 현재 페이지를 설정하려면 : CurrentPage 현재 페이지 데이터 가져옵니다 : currentPagedAta ()

Vue Pagination Guide

Pagination이란 무엇입니까?

Pagination은 대형 데이터 세트를 더 작은 관리 페이지로 분할하는 기술입니다. 이를 통해 사용자는 한 번에 소량의 데이터를로드하여 성능 및 사용자 경험을 향상시킬 수 있습니다.

Vue의 Pagination

Vue는 페이징을위한 다양한 솔루션을 제공합니다. 가장 일반적으로 사용되는 방법 중 하나는 v-for 지침 및 계산 속성을 사용하는 것입니다.

총 페이지 수를 계산하십시오.

 <code class="javascript">computed: { totalPages() { return Math.ceil(this.totalItems / this.pageSize); } }</code>

트래버스 페이지 번호 :

 <code class="javascript"><ul> <li v-for="page in totalPages" :key="page"> <a>{{ page }}</a> </li> </ul></code>

현재 페이지 설정 :

 <code class="javascript">data() { return { currentPage: 1 } }, methods: { goToPage(page) { this.currentPage = page; } }</code>

현재 페이지 데이터 가져 오기 :

 <code class="javascript">computed: { currentPageData() { return this.items.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize); } }</code>

기타 페이지 매김 라이브러리 :

VUE 커뮤니티는 내장 방법 외에도 다음과 같은 많은 타사 페이징 라이브러리를 제공합니다.

• [vue-pagination] (https://github.com/zhangyuwei/vue-pagination)
• [vue-simple-pagination] (https://github.com/ziv/vue-simple-pagination)
• [vue-scroll-pagination] (https://github.com/egoist/vue-scroll-pagination)

이 라이브러리는 페이징을보다 쉽고 유연하게 만들기 위해 다양한 박스 기능을 제공합니다.

위 내용은 Vue Pagination 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!