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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
js实现开关灯效果
Mar 30 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
python中__call__方法示例分析
2014/10/11 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python实现代码统计程序
2019/09/19 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
一套C#面试题
2013/10/09 面试题
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
七年级历史教学反思
2014/02/05 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
科学育儿宣传标语
2014/10/08 职场文书
北京英文导游词
2015/02/12 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技