欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vue.js實現的分頁

 更新時間:2018年03月13日 10:08:54   作者:AmberWu  
本文主要給大家介紹基于vue的分頁原生寫法,代碼分為html部分和js部分,簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧

本文主要介紹基于vue的分頁原生寫法。

先po上效果圖:

這里寫圖片描述

html部分,將page作為一個單獨的組件

<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="{'active':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>
 <div id="app">
  <page></page>
 </div>

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;
     //這里可以發(fā)送ajax請求
    }
   }
  })
  var vm = new Vue({
   el: '#app',
  })
 </script>

css部分:

 body {
   font-family: "Segoe UI";
  }
  li {
   list-style: none;
  }
  a {
   text-decoration: none;
  }
  .pagination {
   position: relative;
  }
  .pagination li {
   display: inline-block;
   margin: 0 5px;
  }
  .pagination li a {
   padding: .5rem 1rem;
   display: inline-block;
   border: 1px solid #ddd;
   background: #fff;
   color: #0E90D2;
  }
  .pagination li a:hover {
   background: #eee;
  }
  .pagination li.active a {
   background: #0E90D2;
   color: #fff;
  }

最后附上github地址:https://github.com/AmberWuWu/vue-page

總結

以上所述是小編給大家介紹的基于vue.js實現的分頁,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • 使用D3.js+Vue實現一個簡單的柱形圖

    使用D3.js+Vue實現一個簡單的柱形圖

    這篇文章主要介紹了使用D3.js+Vue實現一個簡單的柱形圖,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • 從零開始封裝自己的自定義Vue組件

    從零開始封裝自己的自定義Vue組件

    如何封裝自己的Vue組件,如何把自己的Vue代碼封裝成公共組件,今天為大家簡單介紹一下如何封裝自己的Vue組件
    2018-10-10
  • vue中如何修改props傳進來的值

    vue中如何修改props傳進來的值

    大家應該都知道vue是單向數據流,一般我們也不會在子組件里面修改父組件傳進來的值,但總有需要修改的時候,這篇文章主要介紹了vue中修改props傳進來的值,需要的朋友可以參考下
    2022-12-12
  • vue?el-input設置必填提示功能(單個與多個)

    vue?el-input設置必填提示功能(單個與多個)

    有的功能需要設置必填項,當然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關于vue?el-input設置必填提示功能(單個與多個)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • vue-cli如何修改打包項目結構及前綴

    vue-cli如何修改打包項目結構及前綴

    這篇文章主要介紹了vue-cli如何修改打包項目結構及前綴問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue3.x項目中,出現紅色波浪線問題及解決

    vue3.x項目中,出現紅色波浪線問題及解決

    這篇文章主要介紹了vue3.x項目中,出現紅色波浪線問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 從vue基礎開始創(chuàng)建一個簡單的增刪改查的實例代碼(推薦)

    從vue基礎開始創(chuàng)建一個簡單的增刪改查的實例代碼(推薦)

    這篇文章主要介紹了從vue基礎開始創(chuàng)建一個簡單的增刪改查的實例代碼,需要的朋友參考下
    2018-02-02
  • Vue實現星級評價效果實例詳解

    Vue實現星級評價效果實例詳解

    這篇文章主要介紹了Vue實現星級評價效果的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Vue3中使用ref標簽對組件進行操作方法

    Vue3中使用ref標簽對組件進行操作方法

    這篇文章主要介紹了Vue3中使用ref標簽對組件進行操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • vue前端項目打包成Docker鏡像并運行的實現

    vue前端項目打包成Docker鏡像并運行的實現

    這篇文章主要介紹了vue前端項目打包成Docker鏡像并運行的實現方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評論