vue實現(xiàn)前端分頁完整代碼

更新時間：2020年06月17日 08:44:51 作者：最愛松露巧克力

這篇文章主要為大家詳細介紹了vue實現(xiàn)前端分頁完整代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)前端分頁的具體代碼，供大家參考，具體內(nèi)容如下

首先，做出來的效果如圖所示，具體的Ajax請求數(shù)據(jù)可以寫在點擊函數(shù)中
分頁效果算是比較費腦子的，里面計算有些麻煩，本文上完整代碼，一起學習進步

“上一頁”寫兩個li元素，如果已經(jīng)是第一頁，那么就禁止鼠標點擊，如果不是就curr減減，并且可以點擊
同理“下一頁”也一樣
中間部分是通過indexs循環(huán)，indexs通過computed計算得出

<div class="page-bar">
  <ul>
    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一頁</a></li>
    <li v-if="cur==1"><a class="banclick">上一頁</a></li>
    <!--當前頁背景色為藍色-->
    <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
      <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li v-if="cur<all"><a v-on:click="cur++,pageClick()">下一頁</a></li>
    <li v-if="cur == all"><a class="banclick">下一頁</a></li>
    <li><a>共<i>{{all}}</i>頁</a></li>
  </ul>
</div>

難點就是IF嵌套語句

1、每次顯示5個數(shù)據(jù)，如果大于3，范圍從3到6，如果到達7，那么下邊加2變成9，已經(jīng)超過最大的范圍值，所以最大范圍到6
2、如果是大于6，那么最大值就是最大值，最小變成all-4
3、如果3以內(nèi)，默認不跳動

var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 8, //總頁數(shù)
    cur: 1//當前頁碼
  },
  watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  },  
   methods: {
    btnClick: function(data){
      if(data != this.cur){
        this.cur = data;
      }
    },
    pageClick: function(){
      console.log('現(xiàn)在在'+this.cur+'頁');
    }
  },
  computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      //這里最大范圍從3到6，如果到達7，那么下邊加2變成9，已經(jīng)超過最大的范圍值
      if(this.cur > 3 && this.cur < this.all-1){
       //以4為參考基準，左面加2右邊加2
          left = this.cur - 2
          right = this.cur + 2
      }else{
        if(this.cur<=3){
          left = 1
          right = 5
        }else{
          right = this.all
          left = this.all -4
        }
      }
     }
    while (left <= right){
      ar.push(left)
      left ++
    }
    console.log(ar);
    return ar
    }
  }
})

全部代碼：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/vue.min.js"></script>
<style>
.page-bar{
  margin:40px;
}
ul,li{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none
}
.page-bar li:first-child>a {
  margin-left: 0px
}
.page-bar a{
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer
}
.page-bar a:hover{
  background-color: #eee;
}
.page-bar a.banclick{
  cursor:not-allowed;
}
.page-bar .active a{
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i{
  font-style:normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}
</style>
</head>
<body>
 <div class="page-bar">
  <ul>
    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一頁</a></li>
    <li v-if="cur==1"><a class="banclick">上一頁</a></li>
    <!--當前頁背景色為藍色-->
    <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
      <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li v-if="cur<all"><a v-on:click="cur++,pageClick()">下一頁</a></li>
    <li v-if="cur == all"><a class="banclick">下一頁</a></li>
    <li><a>共<i>{{all}}</i>頁</a></li>
  </ul>
</div>
<script type="text/javascript">
var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 8, //總頁數(shù)
    cur: 1//當前頁碼
  },
  watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  },  
   methods: {
    btnClick: function(data){
      if(data != this.cur){
        this.cur = data;
      }
    },
    pageClick: function(){
      console.log('現(xiàn)在在'+this.cur+'頁');
    }
  },
  computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      //這里最大范圍從3到6，如果到達7，那么下邊加2變成9，已經(jīng)超過最大的范圍值
      if(this.cur > 3 && this.cur < this.all-1){
       //以4為參考基準，左面加2右邊加2
          left = this.cur - 2
          right = this.cur + 2
      }else{
        if(this.cur<=3){
          left = 1
          right = 5
        }else{
          right = this.all
          left = this.all -4
        }
      }
     }
    while (left <= right){
      ar.push(left)
      left ++
    }
    console.log(ar);
    return ar
    }
  }
})
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: