vue.js 기반 페이지 매김

이 글에서는 주로 vue 기반의 페이징 작성 방법을 소개합니다. 코드는 html 부분과 js 부분으로 나누어져 있어 간단하고 이해하기 쉬우며, 필요한 친구들이 참고할 수 있습니다.

이 글에서는 주로 Vue를 기반으로 한 네이티브 페이징 방식을 소개합니다.

먼저 렌더링 게시:

html 부분, 페이지를 별도의 구성 요소로 사용

<script type="text/x-template" id="page">
  <ul class="pagination">
   <li v-show="current != 1" @click="current-- && goto(current)">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>
   </li>
   <li v-for="index in pages" @click="goto(index)" :class="{&#39;active&#39;:current == index}" :key="index">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{index}}</a>
   </li>
   <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>
   </li>
  </ul>
 </script>
 <p id="app">
  <page></page>
 </p>

js 부분:

 <script>
  Vue.component("page", {
   template: "#page",
   data: function () {
    return {
     current: 1, // 当前页码
     showItem: 5, // 最少显示5个页码
     allpage: 13 // 总共的
    }
   },
   computed: {
    pages: function () {
     var pag = [];
     if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
      //总页数和要显示的条数那个大就显示多少条
      var i = Math.min(this.showItem, this.allpage);
      while (i) {
       pag.unshift(i--);
      }
     } else { //当前页数大于显示页数了
      var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
       i = this.showItem;
      if (middle > (this.allpage - this.showItem)) {
       middle = (this.allpage - this.showItem) + 1
      }
      while (i--) {
       pag.push(middle++);
      }
     }
     return pag
    }
   },
   methods: {
    goto: function (index) {
     if (index == this.current) return;
     this.current = index;
     //这里可以发送ajax请求
    }
   }
  })
  var vm = new Vue({
   el: &#39;#app&#39;,
  })
 </script>

css 부분:

rrre 에에

위의 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

컨트롤러 간 통신 방법의 예에 대한 Agularjs 요약

Angular_AngularJS에서 더 나은 스크롤 플러그인을 사용하는 방법

노드를 사용하여 자신만의 명령을 만드는 방법에 대한 튜토리얼 선 도구

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