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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jQuery之动画效果大全
Nov 09 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python中的随机函数random的用法示例
2018/01/27 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python3实现简单飞机大战
2020/11/29 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
小学门卫岗位职责
2013/12/17 职场文书
高效课堂标语
2014/06/26 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
人民调解协议书范本
2014/10/11 职场文书
暑假打工感想
2015/08/07 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript