Vue 实现把表单form数据 转化成json格式的数据


Posted in Javascript onOctober 29, 2019

目的:Vue 中 把表单form数据 转化成json格式的数据

第一步:创建一个数据集(就是你表单需要的数据)

如果你表单都是一些正常的数据,比如 text 什么的。你定义好数据集,就去用 v-model 绑定数据。这样就可以实现数据同步了。

数据集

Vue 实现把表单form数据 转化成json格式的数据

v-model绑定

Vue 实现把表单form数据 转化成json格式的数据

如果你的数据不全是这种可以用 v-model 绑定的数据,比如我这个里面需要获取一个 img 的 src 的值。那么下面就需要你想办法把数据给绑定上去了

第二步:转化json

上面第一步,我们已经通过 自动 + 手动 的方式把我们需要的数据给获取到了。下面我们只需要一个方法就可以转成json了。

console.log(JSON.stringify(this.inputForm))

以上这篇Vue 实现把表单form数据 转化成json格式的数据就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 #Javascript
基于form-data请求格式详解
Oct 29 #Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 #Javascript
JS操作字符串转数字的常见方法示例
Oct 29 #Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 #Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 #Javascript
JS操作json对象key、value的常用方法分析
Oct 29 #Javascript
You might like
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php unlink()函数使用教程
2018/07/12 PHP
JS location几个方法小姐
2008/07/09 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python translator使用实例
2008/09/06 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
三好学生自我鉴定
2013/12/17 职场文书
童装店创业计划书
2014/01/09 职场文书
小学语文国培感言
2014/03/04 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
捐款倡议书
2014/04/14 职场文书
大学活动总结范文
2014/04/29 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS