使用vuejs2.0怎么實現(xiàn)一個分頁

.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;
}

  

    1">上一頁
    上一頁
    
      {{ index }}
    
    下一頁
    下一頁
    
共{{all}}頁
  

js

var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 20, //總頁數(shù)
    cur: 1,//當前頁碼
});

調(diào)用 new Vue({參數(shù)}) 就是創(chuàng)建了一個基本的組件,賦值給變量 pageBar.

el就是element的縮寫,定位模版的位置.data就是數(shù)據(jù)了.

知道了總頁數(shù)但是要顯示頁碼還是要一番計算,所以顯示頁碼就是計算屬性了.

所以我們要用computed 

computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      if(this.cur > 3 && this.cur < this.all-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 ++
    }
    return ar
    }
     
  }

 看一下頁面顯示出來的循環(huán)：

    {{ index }}
  

v-for是循環(huán)渲染輸出計算屬性indexs.每一次循環(huán)的子元素賦值給index v-bind:class綁定class,當渲染到目前的角標的時候加個class v-on:click是綁定了事件，我把index當參數(shù)傳進入了,后面做判斷，默認傳event事件.
然后我們給Vue的選項里面再增加methods字段

methods: {
    btnClick: function(data){//頁碼點擊事件
      if(data != this.cur){
        this.cur = data 
      }
    },
    pageClick: function(){
      console.log('現(xiàn)在在'+this.cur+'頁');
    }
  },

組件交互

組件寫完了，問題來了，用戶點擊發(fā)生頁面改變，你怎么通知其他組件作出相應(yīng)的變化. 可以在頁角發(fā)生改變的函數(shù)下，插一條語句通知其他組件。不過這種方法是很差的做法?？梢允褂?/p>

watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  }

觀察了cur數(shù)據(jù)當它改變的時候，可以獲取前后值。然后通知其他組件。

完整的代碼：

 
  

    1">上一頁
    上一頁
    
      {{ index }}
    
    下一頁
    下一頁
    
共{{all}}頁