Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
2.5. 时间日期等其他字段格式化 使用vue.js的 filter过滤器3
1. 场景:应用在项目列表查询场景下
全面的的使用html h5界面分离前后端,使界面可以通用与pc端java php net 微信项目,以及 安卓 ios跨平台以及hybrid app。。
也方便前端人员随时介入调整java项目的界面,加快进度
尽可能的不再使用服务端界面技术(jsp struts wpf el等),一方面没有完整的分离前后端,混杂,一方面服务端界面技术复杂度较大,不利于前端人员介入调整java项目界面
毕竟目前项目界面几乎就占据了50%的工作量,可以方便分散压力
1.1. 预计初步掌握vue.js 几小时即可
2. 绑定ajax列表数据到表格
2.1. List.html 使用v-for循环一下
<table width="100%" border="0" id="table1">
<tbody>
<tr>
<td>用户id</td>
<td> </td>
<td>备注</td>
<td>操作</td>
</tr>
<tr v-for="dataItem in list_data1">
<td> </td>
<td><span class="hide">{{dataItem.用户名}}</span></td>
<td><span class="hide">{{dataItem.备注}}</span></td>
<td> </td>
</tr>
2.2. 预览
2.3. 使用vue.js绑定
<script>
//建立vue与表格的绑定关系,同时设置初始值为空[]
//el就是表格id
//list_data1是自定义的数据列表
var VueObj1 = new Vue({
el: '#table1',
data: {
list_data1: []
}
});
//获取数据,一般是从ajax从后端获取数据
var list_data2=[{用户名:"王一",备注:"管理员"},{用户名:"王二",备注:"普通用户"}];
//将数据绑定到table控件
VueObj1.$data.list_data1=list_data2;
2.4. 效果
用户id |
用户名 |
备注 |
操作 |
王一 |
管理员 |
||
王二 |
普通用户 |
2.5. 时间日期等其他字段格式化 使用vue.js的 filter过滤器
1. v-bind 绑定元素属性方法
2. v-text 输出文本方法
<td>{{itemdata.timex | timeFlt}}</td>
Vue.filter('timeFlt', function (value) {
return fmtDate_local(value);
})
3. 其他
3.1. 9.Vuejs在变化检测问题
3.1.1.1. 1.检测数组
由于JavaScript的限制,vuejs不能检测到下面数组的变化:
1.
直接索引设置元素,如vm.item[0]={};
2.
3.
修改数据的长度,如vm.item.length。
4.
为了解决问题1,Vuejs扩展了观察数组,为它添加一个$set()方法:
// 与 `example1.items[0] = ...` 相同,但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
问题2,需要一个空数组替换items。
除了$set(),vuejs也为观察数组添加了$remove()方法,用于从目标数组中查找并删除元素,在内部调用了splice()。因此,不必:
var index = this.items.indexOf(item)if (index !== -1) {
this.items.splice(index, 1)
}
只需:
this.items.$remove(item);
3.2. 参考资料
VUEJS 实战教程第二章,修复错误并且美化时间 - FungLeo的博客 - 博客频道 - CSDN.NET.html
vue.js - 为什么vue的data数据变了html中用{{}}绑定的数据不会变呢? - SegmentFault.html
Vue 列表渲染 - jiangxiaobo - 博客园.html
Vue.js学习笔记:属性绑定 v-bind.html
作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher
捕鸟王"Bird Catcher kok 虔诚者Pious 宗教信仰* Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王
简称:: Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴
全名::Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当 阿尔 拉帕努伊
常用名:艾提拉(艾龙), EMAIL:1466519819@qq.com
头衔:uke总部o2o负责人,全球网格化项目创始人,
uke交友协会会长 uke捕猎协会会长 Emir Uke部落首席大酋长,
uke宗教与文化融合事务部部长, uke宗教改革委员会副主席
uke制度与重大会议委员会委员长,uke保安部首席大队长,uke制度检查委员会副会长,
uke 首席cto 软件部门总监 技术部副总监 研发部门总监主管 产品部副经理 项目部副经理 uke科技研究院院长 uke软件培训大师
uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人,莱恩群岛区连锁负责人,uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人
Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长
uke终身教育学校副校长 Uke医院 与医学院方面的创始人
uec学院校长, uecip图像处理机器视觉专业系主任 uke文档检索专业系主任
Uke图像处理与机器视觉学院首席院长
Uke 户外运动协会理事长 度假村首席大村长 uke出版社编辑总编
转载请注明来源:attilax的专栏 ?http://www.cnblogs.com/attilax/
--Atiend v8