博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Atitit vue.js 把ajax数据 绑定到form表单
阅读量:5930 次
发布时间:2019-06-19

本文共 1745 字,大约阅读时间需要 5 分钟。

 

 

 

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

 

 

 

你可能感兴趣的文章
C# 图像处理:Bitmap 与 Image 之间的转换
查看>>
VC++ GDI 总结 一一 CBitmap类
查看>>
TCP/IP之DNS域名解析系统
查看>>
如何限制青少年无节制的玩电脑--使用智能卡登录系统
查看>>
mysql修改用户密码
查看>>
Vue
查看>>
扩大ImageButton响应点击区域的方法
查看>>
类加载过程
查看>>
2017全面JAVA面试经历总结
查看>>
Linux mkdir命令
查看>>
Python 函数(参数组合)
查看>>
bzoj1059 [ZJOI2007]矩阵游戏
查看>>
URL传参数导致乱码
查看>>
编译器给未初始化的全局变量和局部变量分配的存储值
查看>>
使用 XML-RPC 为 C++ 应用程序启用 Web 服务
查看>>
ZOJ 3379 Master Spark
查看>>
(转)android多国语言适配
查看>>
299. Bulls and Cows
查看>>
【BZOJ1956】[Ahoi2005]SHUFFLE 洗牌
查看>>
容易忽略的时间错误
查看>>