Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单
1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单 1
1.3. 设置v-bind:value 预计把数据绑定到文本框的value属性 1
1.5. 这里简单的绑定了数据到文本框。。如果绑定select,checkbox较为复杂,可以使用jquery二次绑定即可 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://blog.csdn.net/attilax
--Atiend v8
相关文章
- 如何用vue打造一个移动端音乐播放器
- [Vue @Component] Place Content in Components with Vue Slots
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- springboot+vue实现前后端分离之前端vue部分(spring boot 2.5.4/vue.js 3.2.4)
- 如何给一个vue项目重命名(vue.js 3.2.4)
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- 浅谈vue的双向数据绑定
- vue运行报错ESLint: ‘event‘ is defined but never used.(no-unused-vars)
- Vue.js如何导入新组件
- vue项目报错:migrating.js?2bb5:56 [Element Migrating][ElInput][Event]: click is removed.
- vue 页面刷新还在当前路由
- vue - public 引入 <script>报错 Uncaught SyntaxError: Unexpected token '<'
- 计算机毕设 SSM Vue的企业销售人才培训管理系统(含源码+论文)
- 毕业设计 40个SSM+VUE毕设项目分享【源码+论文】(一)
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
- 178:vue+openlayers 绘制自定义图形,导出为geojson文件
- Vue2.x - Vue Router
- 基于Java+SpringBoot+Vue+Uniapp前后端分离商城系统设计与实现
- Vue.js 循环语句