웹 프론트엔드 View.js Vue에서 데이터 페이징 및 표시를 구현하는 방법

Vue에서 데이터 페이징 및 표시를 구현하는 방법

Oct 15, 2023 pm 05:46 PM
vue (vuejs) 데이터 표시 쪽수 매기기

Vue에서 데이터 페이징 및 표시를 구현하는 방법

Vue는 웹 개발에 널리 사용되는 인기 있는 프런트 엔드 JavaScript 프레임워크입니다. 데이터 기반 및 구성 요소 기반 기능을 통해 개발자는 데이터를 처리하고 대화형 사용자 인터페이스를 보다 편리하게 구축할 수 있습니다.

실제 개발을 하다 보면 많은 양의 데이터를 페이지에 표시해야 하는 상황을 자주 접하게 됩니다. 이 기사에서는 Vue 프레임워크를 사용하여 데이터 페이징 및 표시를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비
먼저 Vue 프레임워크를 프로젝트로 가져와야 합니다. CDN을 통해 도입하거나 npm을 사용하여 설치한 후 import 문을 통해 가져올 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Pagination</title>
</head>
<body>
  <div id="app">
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 分页器 -->
    <div>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示的数据条数
        dataList: [], // 数据列表
      },
      computed: {
        // 计算属性,根据当前页码和每页显示的数据条数,计算当前页显示的数据
        currentPageData() {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          return this.dataList.slice(start, end);
        },
      },
      methods: {
        // 上一页
        prevPage() {
          if (this.currentPage > 1) {
            this.currentPage--;
          }
        },
        // 下一页
        nextPage() {
          if (this.currentPage < this.totalPages) {
            this.currentPage++;
          }
        },
      },
      created() {
        // ajax请求获取数据
        // 这里使用setTimeout模拟异步请求
        setTimeout(() => {
          this.dataList = [
            { id: 1, name: '数据1' },
            { id: 2, name: '数据2' },
            // ...
            { id: 100, name: '数据100' },
          ];
        }, 1000);
      },
    });
  </script>
</body>
</html>
로그인 후 복사

위 코드는 가장 기본적인 페이징 기능의 예입니다. Vue 인스턴스에서는 페이징 논리를 제어하기 위한 일부 데이터와 메서드를 정의합니다.

  1. data 속성에는 currentPage(현재 페이지 번호), pageSize(각 페이지에 표시되는 데이터 항목 수), dataList(데이터 목록)의 세 가지 변수가 정의됩니다.
  2. 현재 페이지에 표시될 데이터인 계산된 속성을 통해 currentPage 및 pageSize를 기반으로 currentPageData를 계산합니다.
  3. 각각 이전 페이지와 다음 페이지로 이동하는 데 사용되는 prevPage 및 nextPage 두 가지 메서드를 정의합니다. 이 두 가지 방법 중에서 먼저 총 페이지 수를 초과하지 않는지 판단하십시오.
  4. 생성된 Hook 함수에서는 비동기식 요청을 시뮬레이션하고, setTimeout 타이머를 통해 1초 지연 후 데이터가 dataList에 저장됩니다.
  5. 템플릿에서 v-for 명령을 사용하여 currentPageData의 데이터를 루프아웃하고 v-bind 명령을 사용하여 키 속성을 연결합니다.
  6. 페이지네이터 부분은 버튼과 바운드 이벤트를 통해 "이전 페이지"와 "다음 페이지" 기능을 구현하고 현재 페이지 번호를 표시합니다.

위 코드는 기본 페이징 표시만 구현합니다. 실제 프로젝트에는 지정된 페이지로 이동, 총 페이지 수 표시 등 더 복잡한 로직이 필요할 수 있습니다. 하지만 기본 개념은 동일합니다. 현재 페이지 번호와 각 페이지에 표시되는 데이터 항목 수를 기준으로 현재 페이지에 표시되는 데이터가 계산됩니다.

위 내용은 Vue에서 데이터 페이징 및 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vuex 란 무엇이며 VUE 응용 프로그램에서 주 관리에 어떻게 사용합니까? vuex 란 무엇이며 VUE 응용 프로그램에서 주 관리에 어떻게 사용합니까? Mar 11, 2025 pm 07:23 PM

vuex 란 무엇이며 VUE 응용 프로그램에서 주 관리에 어떻게 사용합니까?

VUE Export Default에서 구성 요소의 시계를 구성하는 방법 VUE Export Default에서 구성 요소의 시계를 구성하는 방법 Mar 04, 2025 pm 03:30 PM

VUE Export Default에서 구성 요소의 시계를 구성하는 방법

vue.js (구성 요소 기반 아키텍처, 가상 DOM, 반응성 데이터 바인딩)의 주요 기능은 무엇입니까? vue.js (구성 요소 기반 아키텍처, 가상 DOM, 반응성 데이터 바인딩)의 주요 기능은 무엇입니까? Mar 14, 2025 pm 07:05 PM

vue.js (구성 요소 기반 아키텍처, 가상 DOM, 반응성 데이터 바인딩)의 주요 기능은 무엇입니까?

VUE 라우터 (동적 경로, 중첩 경로, 노선 경비원)를 사용하여 고급 라우팅 기술을 구현하려면 어떻게해야합니까? VUE 라우터 (동적 경로, 중첩 경로, 노선 경비원)를 사용하여 고급 라우팅 기술을 구현하려면 어떻게해야합니까? Mar 11, 2025 pm 07:22 PM

VUE 라우터 (동적 경로, 중첩 경로, 노선 경비원)를 사용하여 고급 라우팅 기술을 구현하려면 어떻게해야합니까?

vue.js에서 사용자 정의 플러그인을 어떻게 작성하고 사용합니까? vue.js에서 사용자 정의 플러그인을 어떻게 작성하고 사용합니까? Mar 14, 2025 pm 07:07 PM

vue.js에서 사용자 정의 플러그인을 어떻게 작성하고 사용합니까?

Vue CLI를 다른 빌드 대상 (개발, 생산)을 사용하도록 어떻게 구성합니까? Vue CLI를 다른 빌드 대상 (개발, 생산)을 사용하도록 어떻게 구성합니까? Mar 18, 2025 pm 12:34 PM

Vue CLI를 다른 빌드 대상 (개발, 생산)을 사용하도록 어떻게 구성합니까?

VUE 라우터 란 무엇이며 SPA (Single Page Application) 내비게이션에 어떻게 사용합니까? VUE 라우터 란 무엇이며 SPA (Single Page Application) 내비게이션에 어떻게 사용합니까? Mar 11, 2025 pm 07:21 PM

VUE 라우터 란 무엇이며 SPA (Single Page Application) 내비게이션에 어떻게 사용합니까?

VUE의 구성 요소의 수명주기 후크를 구성하는 방법 VUE의 구성 요소의 수명주기 후크를 구성하는 방법 Mar 04, 2025 pm 03:29 PM

VUE의 구성 요소의 수명주기 후크를 구성하는 방법

See all articles