首先,动态加载数据

<table class="table table-bordered table-condensed no_margin_bottom jyjg_tab">
<tr>
<th>股票代码</th>
<td v-text='pageData[pageIndex[pageI][0]].stockCode'></td>
<td v-text='pageData[pageIndex[pageI][1]].stockCode'></td>
</tr>
<tr>
<th>交易日期</th>
<td v-text='pageData[pageIndex[pageI][0]].date'></td>
<td v-text='pageData[pageIndex[pageI][1]].date'></td>
</tr>
  ……省略
</table>
<div id="page_1" class="page_"></div>

  

vue-data:

      dataG: {
zijinfenpei: 0,//资金分配
zijinfenshu: 0,//资金分数
jizhunjiage: 0,//基准价格
meibijiaoyijine: 0,//每笔交易金额
jiaoyifeilv: 0,//交易费率
dicangbili: 0,//底仓比例
shangzhangxiaxian: 0,//上涨下跌用一个
qujianshangxian: 0,//区间上限
qujianxiaxian: 0,//区间下限
zijinyue: 0,//资金余额
zhengquanshizhi: 0,//证券市值
zichanzongzhi: 0,//资产总值
chigubudong: 0,//持股不动
qujianjiaoyizhihou: 0,//区间交易之后
tongqidapan: 0,//同期大盘
gaopaobishu: 0,//高抛笔数
dixibishu: 0,//低吸笔数
zhengquanshuliang: 0,//证券数量
jiaoyichengben: 0,//交易成本
zengshoujine: 0//增收金额
},
pageData: [//交易结果数据包--格式
{
stockCode: '--',//股票代码
count: "--",//交易数量
qujianjiage: '--',//区间价格
date: '--',//交易时间
jiaoyileixing: 1,//交易类型 1=买入 2=卖出
gaodiguaidian: '--',//高低拐点
price: '--'//交易价格
},
{
stockCode: '--',//股票代码
count: "--",//交易数量
qujianjiage: '--',//区间价格
date: '--',//交易时间
jiaoyileixing: '--',//交易类型 1=买入 2=卖出
gaodiguaidian: '--',//高低拐点
price: '--'//交易价格
},
],
pageIndex: [[0, 1]],//存储分页组数的下标数据包
pageI: 0,//分页数据下标

vue-fn:

pageRecord: function (data) {//交易记录
//console.log(data) //打印数据包
var thas = this, dataArr = data, lenght_ = data.length, arr = [];//公用变量 thas.pageData = [];//清空数据包开始写入数据
for (i in data) {
var data_arr = data[i];
thas.pageData.push({
stockCode: data_arr.code,
count: data_arr.count,
date: data_arr.date,
qujianjiage: data_arr.chufajia,
jiaoyileixing: data_arr.buyOrSel,
gaodiguaidian: data_arr.gaodi,
price: data_arr.price
})
} thas.pageIndex = [];//清空 for (var i = 0; i < lenght_; i++) {
arr.push(i)
}
function arrSlice(arr, num) {
var arr1 = [];
for (var i = 0; i < arr.length / num; i++) {
arr1.push(arr.slice(num * i, num * i + num))
}
return arr1;
}
thas.pageIndex = arrSlice(arr, 2) //将数组弄成下标分组
//console.log(thas.pageIndex) //测试数量分页
thas.page_index();
//JyJl.page_index();还有一个其他的分页 },
page_index: function () {
laypage({ //这个分页空间用的是layui框架的
cont: 'page_1'
, pages: Math.ceil(fXjg.pageData.length / 2)
, groups: 5
, first: false
, last: false
, skin: "#01AAED"
, jump: function (obj, first) {
//console.log(obj.curr)//下标
fXjg.pageI = ((obj.curr) - 1);
}
});
}
}

  事件驱动当然是有某一个按钮之类的请求了ajax,拿到数据后,在成功回调函数里使用了这个fxjg.pageRecord(data);

vue的数据双向绑定让我们省去了很多很多代码,如果是用jqueryDom操作的话,这点代码根本不行。

vue分页tbale小荔枝的更多相关文章

  1. 一、Vue分页实现

    一.Vue分页实现 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ ...

  2. vue项目向小程序迁移调研

    概述 今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用. 基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用 ...

  3. vue 开发微信小程序

    介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实 ...

  4. 学了这么久,vue和微信小程序到底有什么样的区别?

    前言 写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别.相比之下,小程序的钩子函数要简单得多. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期   相比之下 ...

  5. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  6. vue和微信小程序的区别、比较

    链接:https://segmentfault.com/a/1190000015684864 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue ...

  7. 【laravel5.4】vue分页删除

    1.a标签执行ajax删除,后台删除成功后,执行vue分页对象删除对应数据 VUE.js

  8. .vue,跟小程序文件在sublime里面怎么实现代码格式化

    .vue文件跟小程序的.wxml,.wxss用sublime的HTML/CSS/JS prettify插件也可以实现格式化代码的效果 首先你在sublime要已经安装好了HTML/CSS/JS pre ...

  9. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

随机推荐

  1. hdu 1698 线段树 区间更新 区间求和

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. bzoj 4900 [CTSC2017]密钥 模拟+乱搞

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4900 #include<cstring> #include<cmath&g ...

  3. 寻找最大连续子序列/Find the max contiguous subsequence

    寻找最大连续子序列 给定一个实数序列X1,X2,...Xn(不需要是正数),寻找一个(连续的)子序列Xi,Xi+1,...Xj,使得其数值之和在所有的连续子序列数值之和中为最大. 一般称这个子序列为最 ...

  4. Hadoop 介绍

    1.Hadoop简介 Hadoop[hædu:p]实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有高容错性的特点,并且设计用来部署在低 ...

  5. Beagleboneblack的MLO文件干了些啥

    Beagleboneblack在启动linux之前还有三个启动阶段: ROM code  -->  MLO  -->  u-boot --> kernel 先看看ROM code干了 ...

  6. LightOJ 1023 Discovering Permutations 水题

    http://www.lightoj.com/volume_showproblem.php?problem=1023 题意:26字母全排列 思路:用next_permutation或者思维想一下都可以 ...

  7. Doc常用命令

    1. 获取目录: dir 2. 清屏: cls

  8. redis常用数据结构解析

    Redis是一个开源的Key-Value存储引擎,它支持string.hash.list.set和sorted set等多种值类型.由于其卓越的性能表现.丰富的数据类型及稳定性,广泛用于各种需要k/v ...

  9. word2vec Explained: deriving Mikolov et al.'s negative-sampling word-embedding method

    最近接到任务研究word2vec,感觉网络上关于这个的资料层次不齐,总感觉解释的都没有那么完善.或许就连作者本人也不是非常清楚为什么他的模型好使.论文中提到的negtive sampling给了我很大 ...

  10. 选择Asp for javascript,非.net。

    写Web类型的程序我使用过的服务器端语言有C#和Python.PHP稍Copy过几段代码,Asp很早听说过.C#我主要用来写Web服务比较多,C#这种强类型语言写Web不太爽,特别构造复杂的JSON数 ...