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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
JS获取动态添加元素的方法详解
Jul 31 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
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Django的models中on_delete参数详解
2019/07/16 Python
django页面跳转问题及注意事项
2019/07/18 Python
python利用opencv实现颜色检测
2021/02/23 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
在校学生职业规划范文
2014/01/08 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Python基本的内置数据类型及使用方法
2022/04/13 Python
python标准库ElementTree处理xml
2022/05/20 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android