成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue 實(shí)用分頁(yè)組件paging（頁(yè)數(shù)太多時(shí)顯示省略號(hào)）

ShevaKuilin / 3394人閱讀

摘要：年更新之前的版本在頁(yè)數(shù)太多時(shí)依然每一頁(yè)都顯示，這顯然不合理。增強(qiáng)版在頁(yè)數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁(yè)組件多帶帶提取出來(lái)，可以直接在其他頁(yè)面引入使用。用下來(lái)還是的做法方便一些，不需要繞一下子了。總頁(yè)數(shù)當(dāng)前頁(yè)頁(yè)面初始化函數(shù)參考文章

2017年6.26更新：

之前的版本在頁(yè)數(shù)太多時(shí)依然每一頁(yè)都顯示，這顯然不合理。增強(qiáng)版在頁(yè)數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁(yè)組件多帶帶提取出來(lái)，可以直接在其他頁(yè)面引入使用。代碼見： Paging.vue

也可以直接在JSfiddle中查看實(shí)現(xiàn)

—————————————下面是之前的版本————————————

直接上代碼。只有一個(gè)小小的需要注意的點(diǎn)：vue1.x的v-for循環(huán)是從0開始，遵從了程序語(yǔ)言設(shè)計(jì)的一貫的做法，而vue2.x是從1開始的，符合我們平常的習(xí)慣。用下來(lái)還是vue2.x的做法方便一些，不需要繞一下子了。

你也可以 直接在jsfiddle中查看 。

//html


prev

next

//js
var paging = new Vue({
  el: "#paging",
  data: {
    sum: 4, //總頁(yè)數(shù)
    curPage: 1, //當(dāng)前頁(yè)
  },
  methods: {
    getBooks: function(page){
      //頁(yè)面初始化函數(shù)
    },
    switchPage: function(page){
      var vm = this;
      if(page < 1) {
        page = 1;
      } else if(page > vm.sum) {
        page = vm.sum;
      }
      vm.getBooks(page);
      vm.curPage = page;
    },
  }
})
//css
span {
  display: inline-block;
  margin: 3px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: pink;
  background: #fff;
  border-radius: 5px;
}
span.current-page,
span:hover {
  color: #fff;
  background: pink;
}

參考文章：
https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50668.html

相關(guān)文章

  • Vue 實(shí)用分頁(yè)組件paging（頁(yè)數(shù)太多時(shí)顯示省略號(hào)）

    摘要：年更新之前的版本在頁(yè)數(shù)太多時(shí)依然每一頁(yè)都顯示，這顯然不合理。增強(qiáng)版在頁(yè)數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁(yè)組件單獨(dú)提取出來(lái)，可以直接在其他頁(yè)面引入使用。用下來(lái)還是的做法方便一些，不需要繞一下子了?？傢?yè)數(shù)當(dāng)前頁(yè)頁(yè)面初始化函數(shù)參考文章 2017年6.26更新： 之前的版本在頁(yè)數(shù)太多時(shí)依然每一頁(yè)都顯示，這顯然不合理。增強(qiáng)版在頁(yè)數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁(yè)組件單獨(dú)提取出來(lái)，可以直接在其他頁(yè)面引入使...

    andycall 評(píng)論0 收藏0

  • Vue 實(shí)用分頁(yè)組件paging（頁(yè)數(shù)太多時(shí)顯示省略號(hào)）

    摘要：年更新之前的版本在頁(yè)數(shù)太多時(shí)依然每一頁(yè)都顯示，這顯然不合理。增強(qiáng)版在頁(yè)數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁(yè)組件單獨(dú)提取出來(lái)，可以直接在其他頁(yè)面引入使用。用下來(lái)還是的做法方便一些，不需要繞一下子了?？傢?yè)數(shù)當(dāng)前頁(yè)頁(yè)面初始化函數(shù)參考文章 2017年6.26更新： 之前的版本在頁(yè)數(shù)太多時(shí)依然每一頁(yè)都顯示，這顯然不合理。增強(qiáng)版在頁(yè)數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁(yè)組件單獨(dú)提取出來(lái)，可以直接在其他頁(yè)面引入使...

    cnio 評(píng)論0 收藏0

  • 手把手教你用原生JavaScript造輪子（1）——分頁(yè)器（最后更新：Vue插件版本，本篇Over！

    摘要：使用構(gòu)造函數(shù)那么有沒(méi)有一種辦法，可以不寫函數(shù)名，直接聲明一個(gè)函數(shù)并自動(dòng)調(diào)用它呢答案肯定的，那就是使用自執(zhí)行函數(shù)。 日常工作中經(jīng)常會(huì)發(fā)現(xiàn)有大量業(yè)務(wù)邏輯是重復(fù)的，而用別人的插件也不能完美解決一些定制化的需求，所以我決定把一些常用的組件抽離、封裝出來(lái)，形成一套自己的插件庫(kù)。同時(shí)，我將用這個(gè)教程系列記錄下每一個(gè)插件的開發(fā)過(guò)程，手把手教你如何一步一步去造出一套實(shí)用性、可復(fù)用性高的輪子。 So, ...

    CHENGKANG 評(píng)論0 收藏0

  • 一個(gè)通用的vue的表格組件

    摘要：在做業(yè)務(wù)組件的時(shí)候需要自己自己封裝一個(gè)通用的表格，這個(gè)表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁(yè)，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及怎么使用。 在做業(yè)務(wù)組件的時(shí)候需要自己自己封裝一個(gè)通用的表格，這個(gè)表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁(yè)，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及...

    caoym 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<