|
聽說大牛都從博客開始的。。。 人狠話不多，翠花上酸菜代碼： 有注解基本上都看的懂！但是自己還是要注意以下幾點，免得以后再浪費時間。 #.vue 中監(jiān)聽事件 v-on:change=“vueChange($event.target.value)”(或@),注意 純 js中監(jiān)聽事件 onchange="JSChange（ this.options[this.options.selectedIndex].value )"來獲得 value;也可以在函數(shù)中拿到標(biāo)簽 Dom 用 addvaddEventListener ('change', function(){ JSChange（this.options[this.options.selectedIndex].value ） },false).然后在 JSChange（）方法中接收 value 處理數(shù)據(jù)。分頁代碼都差不多。 #.通過name屬性獲取標(biāo)簽 Dom: document.getElementsByTagName('select')[name="test"]. #.類型為 number 的 input 框意外的輸入字母 e （自然常數(shù)，為數(shù)學(xué)中一個常數(shù)，是一個無限不循環(huán)小數(shù)，且為超越數(shù)，其值約為2.71828）處理：onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"。 #.分頁功能主要在 winnerGroup() 方法，雙層循環(huán)沒啥說的要做保險。 #.css 中 select 和 input 設(shè)置了同樣的寬高 但 select content 總是少 2px select:  input:  box-sizing: border-box;/* 元素的任何內(nèi)邊距和邊框都將包括在已設(shè)定的寬度和高度內(nèi) */ 也就是把內(nèi)邊距和邊框都包含在你設(shè)置的 height 和 width 里了(應(yīng)該可以理解包含在 content)這樣就解決了不一致的狀況。 #. v-model 雙向數(shù)據(jù)綁定，監(jiān)聽 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.獲取事件對象 ， 方法參數(shù)傳遞 $event --> 11 <!-- 2.在標(biāo)簽上添加 ref = “name” ，表示獲取當(dāng)前元素節(jié)點(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"/>頁 總共 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, // 展示條數(shù) 35 value: 1, // input 值 36 size: '', // 分組需要的空間大小 37 // 后臺數(shù)據(jù) 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 數(shù)據(jù) 55 this.winnerGroup(); 56 }, 57 58 methods:{ 59 // 改變展示條數(shù) 60 changeItems: function(e) { 61 console.log("changeItems" + e); 62 // 必須要清空 groups 否則會帶入上次的分組 （原因 push） 63 this.groups = []; 64 this.items = e; 65 this.winnerGroup(); 66 }, 67 // 設(shè)置、選擇頁數(shù) 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 // 前面頁數(shù)改變后 input 框頁數(shù)也要改變 77 this.value=this.pageNumber; 78 }, 79 // 按展示條目分組默認(rèn) 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 // 控制外層及內(nèi)循環(huán)開始遍歷的基數(shù) 87 for (let i = 1; i <= this.size; i++) { 88 let tempArr = []; // 分好的單個數(shù)組 89 let temp; // 遍歷次數(shù) 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 /* 元素的任何內(nèi)邊距和邊框都將包括在已設(shè)定的寬度和高度內(nèi) */ 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> |
|
|
