首先,动态加载数据
<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操作的话,这点代码根本不行。