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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
js微信分享实现代码
Oct 11 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
手把手带你封装一个vue component第三方库
Feb 14 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP生成月历代码
2007/06/14 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
原生js开发的日历插件
2017/02/04 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python机器学习库常用汇总
2017/11/15 Python
Python爬豆瓣电影实例
2018/02/23 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python实现可变变量名方法详解
2019/07/01 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python异步Web框架sanic的实现
2020/04/27 Python
最新pycharm安装教程
2020/11/18 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
公益广告语集锦
2014/03/13 职场文书
幼儿园运动会口号
2014/06/07 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
php中pcntl_fork详解
2021/04/01 PHP
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL