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 
 26 
 27 
112 
113