vue 상용 페이지 분할 기

vue-pagination-2 사용,코드 보기:

<template>
  <div class="news-content">
    <ul class="news-item">
      <!--      -->
      <li v-for="list in newsItem" :key="list.id">
        <span>{{ list.title }}</span>
      </li>
    </ul>
    <div class="pagination-box">
      <pagination
        v-model="page"
        :records="records"
        :per-page="1"
        @paginate="myCallback"
      ></pagination>
    </div>
  </div>
</template>

<script>
import http from '../../src/utils/http';
import Pagination from 'vue-pagination-2';
export default {
  name: 'News',
  data() {
    return {
      page: 1,
      page_size: 5,
      records: 1,
      newsItem: [],
    };
  },
  components: {
    Pagination,
  },
  mounted() {
    this.getNews();
  },
  methods: {
    //         
    getNews() {
      http
        .get('    ', {
          page: this.page,
          page_size: this.page_size,
        })
        .then(data => {
          if (data.success) {
            this.newsItem = $data.list; //    
            this.records = Math.ceil($data.total / this.page_size); //   
          }
        });
    },
    myCallback(page) {
      //            
      this.page = page;
      this.getNews();
    },
  },
};
</script>

페이지 매개 변수 설명:
4.567917.4.567914.총수 이 고 이 매개 변 수 는 필수 적 이다
4.567917.4.567914.페이지 당 수량 을 표시 합 니 다.이것 은 선택 할 수 있 습 니 다.기본 값 은 25 개 입 니 다이것 은 초기 페이지 이 고 기본 값 은 첫 페이지 입 니 다4.567917.4.567914.이것 은 옵션 입 니 다.그 안에 다른 매개 변 수 를 포함 할 수 있 습 니 다.묵인
사용자 정의 이 벤트 를 호출 할 수 있 습 니 다.구성 요소 에서 리 셋 을 듣 고 실행 할 수 있 습 니 다.그 는 현재 페이지 를 위 한 인자 페이지 를 되 돌려 줄 것 이다.이 매개 변 수 를 이용 하여 목록 내용 을 업데이트 할 수 있 습 니 다