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 变化随之变化。
<!-- 中奖查询及查询条件 -->
<template>
<div id="paging">
<div class="winners">
<ul>
<li v-for="winner in winners" :key="winner.id">{{winner.name}}</li>
</ul>
</div>
<div class="condition">每页显示
<!-- 1.获取事件对象 , 方法参数传递 $event -->
<!-- 2.在标签上添加 ref = “name” ,表示获取当前元素节点(this.$refs.info.value) -->
<select name="changeItems" @change="changeItems($event.target.value)">
<option :value="3">3</option>
<option :value="6">6</option>
<option :value="9">9</option>
</select>条
<button v-on:click= "changePage(pageNumber -= 1)">上一页</button>第
<button disabled="disabled">{{pageNumber}}</button>页
<button v-on:click= "changePage(pageNumber += 1)">下一页</button>
前往第
<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"/>页 总共
<button disabled="disabled">{{size}}</button>页
</div>
</div>
</template> <script>
export default {
data() {
return {
winners: [], // 要展示的中奖人
groups: new Array(), // 按条件分组后的元素集合
pageNumber: 1, // 页码
items: 3, // 展示条数
value: 1, // input 值
size: '', // 分组需要的空间大小
// 后台数据
data: [
{ id: 0, name: "张三1", age: 17 },
{ id: 1, name: "张三2", age: 18 },
{ id: 2, name: "张三3", age: 19 },
{ id: 3, name: "张三4", age: 20 },
{ id: 4, name: "张三5", age: 21 },
{ id: 5, name: "张三6", age: 17 },
{ id: 6, name: "张三7", age: 18 },
{ id: 7, name: "张三8", age: 19 },
{ id: 8, name: "张三9", age: 20 },
{ id: 9, name: "张三10", age: 21 }
]
}
}, created: function () {
// 此时才加载 data 数据
this.winnerGroup();
}, methods:{
// 改变展示条数
changeItems: function(e) {
console.log("changeItems" + e);
// 必须要清空 groups 否则会带入上次的分组 (原因 push)
this.groups = [];
this.items = e;
this.winnerGroup();
},
// 设置、选择页数
changePage(e) {
console.log("changePage:" + e);
this.pageNumber = e;
// 选择、输入 pageNumber 值大于、小于 所需空间 size 将其置为 1
if(this.pageNumber > this.size || this.pageNumber <= 0) {
this.pageNumber = 1;
}
this.winners = this.groups[this.pageNumber-1].oneGroup;
// 前面页数改变后 input 框页数也要改变
this.value=this.pageNumber;
},
// 按展示条目分组默认 3 个一组
winnerGroup() {
console.log(this.items+"items")
let winnerCount = this.data;
let objList = new Object();
if(winnerCount.length > 0) {
this.size = winnerCount.length/this.items==0 ? winnerCount.length/this.items : Math.ceil((winnerCount.length/this.items));
// 控制外层及内循环开始遍历的基数
for (let i = 1; i <= this.size; i++) {
let tempArr = []; // 分好的单个数组
let temp; // 遍历次数
if (this.items * i > winnerCount.length) {
temp = winnerCount.length;
} else {
temp = this.items * i;
}
// 三个打包成一组
for (let j = this.items * (i - 1); j < temp; j++) {
tempArr.push(winnerCount[j]) ;
}
let newObj = new Object();
// newObj. oneGroup = JSON.stringify(tempArr);
newObj.oneGroup = tempArr;
this.groups.push(newObj);
}
console.log(this.groups)
this.winners = this.groups[this.pageNumber-1].oneGroup;
// objList.data = this.groups;
}
}
}
}
</script> <style>
/* 去掉上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
} .condition{
float: right;
} input, select{
/* 元素的任何内边距和边框都将包括在已设定的宽度和高度内 */
box-sizing: border-box;
text-align: center;
padding: 0px;
border: 1px solid rgb(169, 169, 169);
height: 23px;
width: 30px;
}
</style>
js+vue、纯js 按条件分页的更多相关文章
- 用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- 【vue-cli 3.0】 vue.config.js配置 - 路径别名
如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- 纯js手动分页
昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完 ...
随机推荐
- Django redis 应用
一.自定义连接池 与python中使用连接池一样(使用单例对象) 注意:每个视图函数都要有 conn = redis.Redis(connection_pool=POOL) 二.使用第三方模块(dja ...
- OGG bi-directional replication for Oracle DB
Overview of an Active-Active Configuration Oracle GoldenGate supports an active-active bi-directiona ...
- 7、python基本数据类型之散列类型
前言:python的基本数据类型可以分为三类:数值类型.序列类型.散列类型,本文主要介绍散列类型. 一.散列类型 内部元素无序,不能通过下标取值 1)字典(dict):用 {} 花括号表示,每一个元素 ...
- Ogre源码学习-Image和Texture
以下文字来自源码注释: Image类:保存未压缩的图片数据,是唯一一个可以加载纹理的类.Image对象调用Codec对象来为图片数据解码. 通常,当在图片被加载前需要对它进行额外的处理,或者你想把它复 ...
- axios用post传参,后端无法获取参数问题
最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const expr ...
- react-native--->RN发送/接收事件机制
import { AppRegistry, StyleSheet, Text, View, Platform, NativeAppEventEmitter, DeviceEventEmitter, } ...
- 强大的Guava中的新集合类型: Multiset, Multimap, BiMap, Table, ClassToInstanceMap, RangeSet, RangeMap等
一 Multiset /** * 新类型集合: Multiset: Multiset就是可以保存多个相同的对象,并且无序 * 占据了List和Set之间的一个灰色地带 * 其他实现: TreeMult ...
- linux启动Firefox报错,及解决方法
今天在安装Firefox时,出现如下错误 [root@localhost ~]# firefox XPCOMGlueLoad error for file /usr/lib64/firefox/lib ...
- 实验17:NAT
实验14-1:静态NAT 配置 Ø 实验目的通过本实验可以掌握(1)静态NAT 的特征(2)静态NAT 基本配置和调试 Ø 拓扑结构 实验步骤n 步骤1:配置路由器R1 提供NAT ...
- 实现当前目录下开启CMD
我们都知道在WIN7下,可以按shift+鼠标右键->在此处打开命令窗口 或者在 输入cmd,回车 那么,怎样去实现这样的功能呢? //当前目录下开启CMD #include <stdio ...