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 ajax同步异步的执行最终解决方案
Apr 26 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
JSON 数据格式详解
Sep 13 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
js实现动态时钟
Mar 12 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
简单的三步vuex入门
2018/05/20 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python flask框架post接口调用示例
2019/07/03 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
应届毕业生求职信范文
2014/05/08 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2014年林业工作总结
2014/12/05 职场文书
土建施工员岗位职责
2015/04/11 职场文书
董事长开业致辞
2015/07/29 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL