zoukankan      html  css  js  c++  java
  • 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          30px;
    135     }
    136 </style>
  • 相关阅读:
    Windows 8实例教程系列 开篇
    qt 开发发布于 windeploy.exe
    qt qoci 测试验证
    vmware vmx 版本不兼容
    qt oracle
    vc qt dll
    QOCIDriver unable to create environment
    qoci 编译完 放置位置 具体根据情况
    calling 'lastError' with incomplete return type 'QSqlError' qsqlquer
    Hbase 操作工具类
  • 原文地址:https://www.cnblogs.com/dopocheng/p/12190863.html
Copyright © 2011-2022 走看看