Atitit vue.js 把ajax数据 绑定到form表单
1.1. 使用场景:主要应用在编辑与提交场合。。
1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单
1.3. edit.html设置v-bind:value 预计把数据绑定到文本框的value属性
<form id="form1" name="form1" method="post">
<p>
<label for="textfield">用户名:</label>
<input name="textfield" type="text" id="textfield" v-bind:value="obj1.用户名">
</p>
<p>
<label for="textfield2">备注:</label>
<input type="text" name="textfield2" id="textfield2" v-bind:value="obj1.备注">
1.4. 获取ajax数据,并绑定到form控件
<script>
//建立vue与表格的绑定关系,同时设置初始值为空{}
//el就是form id
//obj1 是自定义的数据列表
var VueObj1 = new Vue({
el: '#form1',
data: {
obj1:{}
}
});
//获取数据,一般是从ajax从后端获取数据
var json_from_ajax= { 用户名:"王一",备注:"管理员"};
//将数据绑定到form控件
VueObj1.$data.obj1=json_from_ajax;
</script>
1.5. 这里简单的绑定了数据到文本框。。如果绑定select,checkbox较为复杂,可以使用jquery二次绑定即可
即使用jquery把未绑定数据的控件绑定一下即可。。可以混合使用,取长补短
1.6. 效果
1.7. 提交表单form,直接使用jquery
1.8. 参考资料
Vue 表单控件绑定 - jiangxiaobo - 博客园.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