js+vue、純js 按條件分頁

據說大牛都從博客開始的。。。

人狠話很少，翠花上酸菜代碼：

有註解基本上都看的懂！可是本身仍是要注意如下幾點，省得之後再浪費時間。

#.vue 中監聽事件 v-on:change=「vueChange($event.target.value)」(或@),注意 純 js中監聽事件 onchange="JSChange（ this.options[this.options.selectedIndex].value  )"來得到 value;也能夠在函數中拿到標籤 Dom 用  addvaddEventListener ('change', function(){ JSChange（this.options[this.options.selectedIndex].value ） },false).而後在  JSChange（）方法中接收 value 處理數據。分頁代碼都差很少。

#.經過name屬性獲取標籤 Dom: document.getElementsByTagName('select')[name="test"].

#.類型爲 number 的 input 框意外的輸入字母 e （天然常數，爲數學中一個常數，是一個無限不循環小數，且爲超越數，其值約爲2.71828）處理：onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"。

#.分頁功能主要在 winnerGroup() 方法，雙層循環沒啥說的要作保險。

#.css 中 select 和 input 設置了一樣的寬高 但 select content 老是少 2px 

select:

input:

 

 box-sizing: border-box;/* 元素的任何內邊距和邊框都將包括在已設定的寬度和高度內 */

也就是把內邊距和邊框都包含在你設置的 height 和 width 裏了(應該能夠理解包含在 content)這樣就解決了不一致的情況。

#. v-model 雙向數據綁定，監聽 pageNumber 變化隨之變化。

  1 <!-- 中獎查詢及查詢條件 -->
  2 <template>
  3     <div id="paging">
  4         <div class="winners">
  5             <ul>
  6                 <li v-for="winner in winners" :key="winner.id">{{winner.name}}</li>
  7             </ul>
  8         </div>
  9         <div class="condition">每頁顯示
 10             <!-- 1.獲取事件對象 ， 方法參數傳遞  $event -->
 11             <!-- 2.在標籤上添加 ref = 「name」 ，表示獲取當前元素節點(this.$refs.info.value) -->
 12             <select name="changeItems" @change="changeItems($event.target.value)">
 13                 <option :value="3">3</option>
 14                 <option :value="6">6</option>
 15                 <option :value="9">9</option>
 16             </select>條
 17             <button v-on:click= "changePage(pageNumber -= 1)">上一頁</button>第
 18             <button disabled="disabled">{{pageNumber}}</button>頁
 19             <button v-on:click= "changePage(pageNumber += 1)">下一頁</button>
 20             前往第
 21             <input name="inputPageNum" type="number" v-on:change="changePage($event.target.value)" v-model="value" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" min="0"/>頁&nbsp;總共
 22             <button disabled="disabled">{{size}}</button>頁
 23         </div>
 24     </div>
 25 </template>
 26 
 27 <script>
 28 export default {
 29     data() {
 30         return {
 31             winners: [],         // 要展現的中獎人
 32             groups: new Array(), // 按條件分組後的元素集合
 33             pageNumber: 1,       // 頁碼   
 34             items: 3,            // 展現條數
 35             value: 1,            // input 值
 36             size: '',            // 分組須要的空間大小
 37             // 後臺數據
 38             data: [
 39                 { id: 0, name: "張三1", age: 17 },
 40                 { id: 1, name: "張三2", age: 18 },
 41                 { id: 2, name: "張三3", age: 19 },
 42                 { id: 3, name: "張三4", age: 20 },
 43                 { id: 4, name: "張三5", age: 21 },
 44                 { id: 5, name: "張三6", age: 17 },
 45                 { id: 6, name: "張三7", age: 18 },
 46                 { id: 7, name: "張三8", age: 19 },
 47                 { id: 8, name: "張三9", age: 20 },
 48                 { id: 9, name: "張三10", age: 21 }
 49             ]
 50         }
 51     },
 52 
 53     created: function () {
 54         // 此時才加載 data 數據
 55         this.winnerGroup();
 56     },
 57 
 58     methods:{
 59         // 改變展現條數
 60         changeItems: function(e) {
 61             console.log("changeItems" + e);
 62             // 必需要清空 groups 不然會帶入上次的分組 （緣由 push）
 63             this.groups = [];
 64             this.items = e;
 65             this.winnerGroup();          
 66         },
 67         // 設置、選擇頁數
 68         changePage(e) {
 69             console.log("changePage:" + e);
 70             this.pageNumber = e;
 71             // 選擇、輸入 pageNumber 值大於、小於 所需空間 size 將其置爲 1
 72             if(this.pageNumber > this.size || this.pageNumber <= 0) {
 73                 this.pageNumber = 1;  
 74             } 
 75             this.winners = this.groups[this.pageNumber-1].oneGroup;    
 76             // 前面頁數改變後 input 框頁數也要改變
 77             this.value=this.pageNumber; 
 78         },
 79         // 按展現條目分組默認 3 個一組
 80         winnerGroup() {
 81             console.log(this.items+"items")
 82             let winnerCount = this.data;
 83             let objList = new Object();
 84             if(winnerCount.length > 0) {
 85                 this.size = winnerCount.length/this.items==0 ? winnerCount.length/this.items : Math.ceil((winnerCount.length/this.items));
 86                 // 控制外層及內循環開始遍歷的基數
 87                 for (let i = 1; i <= this.size; i++) {
 88                     let tempArr = [];   // 分好的單個數組
 89                     let temp;           //  遍歷次數
 90                     if (this.items * i > winnerCount.length) {
 91                         temp = winnerCount.length;
 92                     } else {
 93                         temp = this.items * i;
 94                     }
 95                     // 三個打包成一組
 96                     for (let j = this.items * (i - 1); j < temp; j++) {
 97                         tempArr.push(winnerCount[j]) ;
 98                     }
 99                     let newObj = new Object();
100                     // newObj. oneGroup = JSON.stringify(tempArr);
101                     newObj.oneGroup = tempArr;
102                     this.groups.push(newObj);
103                 }
104                 console.log(this.groups)
105                 this.winners = this.groups[this.pageNumber-1].oneGroup;              
106                 // objList.data = this.groups;
107             }
108         }
109     }
110 }
111 </script>
112 
113 <style>
114     /* 去掉上下箭頭 */
115     input::-webkit-outer-spin-button,
116     input::-webkit-inner-spin-button {
117         -webkit-appearance: none;
118     }
119     input[type="number"]{
120         -moz-appearance: textfield;
121     }
122 
123     .condition{
124         float: right;
125     }
126 
127     input, select{
128         /* 元素的任何內邊距和邊框都將包括在已設定的寬度和高度內 */
129         box-sizing: border-box;
130         text-align: center;
131         padding: 0px;
132         border: 1px solid rgb(169, 169, 169);
133         height: 23px;
134         width: 30px;
135     }
136 </style>