Atitit vue.js 把ajax数据 绑定到form表单

Atitit vue.js 把ajax数据 绑定到form表单

1.1. 使用场景：主要应用在编辑与提交场合。。1

1.2. 绑定数据到form控件，可以使用jquery，不过vue.js更加简单1

1.3. 设置v-bind:value 预计把数据绑定到文本框的value属性1

1.4. 获取ajax数据，并绑定到form控件1

1.5. 这里简单的绑定了数据到文本框。。如果绑定select,checkbox较为复杂，可以使用jquery二次绑定即可2

1.6. 效果2

1.7. 提交表单form，直接使用jquery2

1.8. 参考资料2

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