vue實現一個分頁組件vue-paginaiton
vue使用了一段時間的感觸就是，我再也不想直接操作DOM了。數據綁定式的編程體驗真是好。實現的一個分頁組件。
這里的css就不放出來了，可以看直接去github上下載：vue-pagination
先上一張實例圖吧
模版
<div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on：click="cur--">上一頁</a></li> <li v-for = "index in pagenums"> <a v-on:click="pageChange(index)">{{index}}</a> </li> <li v-if="showNextText"><a v-on：click="cur++">下一頁</a></li> <li><a>共<i>{{all}}</i>頁</a></li> </ul></div>
在未引入js前,頁面的顯示,分析下,all字段簡單直接輸出即可,{{index}}是分頁碼這個需要一些動態的渲染。
var app = new Vue({ el: '#app', data:{ currentpage: 1, totlepage: 28, visiblepage:10, msg: '' },})調用 new Vue({參數}) 就是創建了一個基本的組件,賦值給變量 app.el就是element的縮寫,定位模版的位置.data就是數據了.知道了總頁數但是要顯示頁碼還是要一番計算,所以顯示頁碼就是計算屬性了.所以我們要用computed
computed: { //計算屬性：返回頁碼數組，這里會自動進行臟檢查，不用$watch(); pagenums: function(){ //初始化前后頁邊界 var lowPage = 1; var highPage = this.totlepage; var pageArr = []; if(this.totlepage > this.visiblepage){//總頁數超過可見頁數時，進一步處理； var subVisiblePage = Math.ceil(this.visiblepage/2); if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//處理正常的分頁 lowPage = this.currentpage - subVisiblePage; highPage = this.currentpage + subVisiblePage -1; }else if(this.currentpage <= subVisiblePage){//處理前幾頁的邏輯 lowPage = 1; highPage = this.visiblepage; }else{//處理后幾頁的邏輯 lowPage = this.totlepage - this.visiblepage + 1; highPage = this.totlepage; } } //確定了上下page邊界后，要準備壓入數組中了 while(lowPage <= highPage){ pageArr.push(lowPage); lowPage ++; } return pageArr; } },觀看html模版發現v-if指令.很明顯當內容是true就輸出,否就沒。
重點看下
<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}"> <a v-on:click="pageChange(index)">{{ index }}</a> </li>v-for是循環渲染輸出計算屬性pagenums.每一次循環的子元素賦值給index v-bind:class綁定class,當渲染到目前的角標的時候加個class v-on:click是綁定了事件，我把index當參數傳進入了,后面做判斷，默認傳event事件.
然后我們Vue的選項里面再增加methods字段
methods:{ pageChange: function(page){ if (this.currentpage != page) { this.currentpage = page; this.$dispatch('page-change', page); //父子組件間的通信：==>子組件通過$diapatch(),分發事件，父組件冒泡通過v-on:page-change監聽到相應的事件； }; } }組件交互
組件寫完了，問題來了，用戶點擊發生頁面改變，你怎么通知其他組件作出相應的變化. 可以在頁角發生改變的函數下，插一條語句通知其他組件。不過這種方法是很差的做法。可以使用
watch: { currentpage: function(oldValue , newValue){ console.log(arguments) }}觀察了currentpage數據當它改變的時候，可以獲取前后值。然后通知其他組件。
完整的代碼可以看 github:vue-pagination
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
