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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
js html实现计算器功能
Nov 13 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
javascript实现数字倒计时特效
2016/03/30 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python内置函数reversed()用法分析
2018/03/20 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
如何用python处理excel表格
2020/06/09 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
C#笔试题和英文面试题
2013/02/07 面试题
大客户销售经理职责
2013/12/04 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
2014年政工师工作总结
2014/12/18 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
Navicat for MySQL的使用教程详解
2021/05/27 MySQL