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

 

 

 

posted @ 2017-03-05 00:13 attilaxAti 阅读(...) 评论(...) 编辑 收藏