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>