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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
使用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
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
子页向父页传值示例
2013/11/27 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python正则表达式和元字符详解
2018/11/29 Python
python读写csv文件实例代码
2019/07/05 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
期中考试后的反思
2014/02/08 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
小学生春游活动方案
2014/08/20 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
新兵入伍决心书
2015/09/22 职场文书
小学语文国培研修日志
2015/11/13 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
解决Oracle数据库用户密码过期
2022/05/11 Oracle