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 相关文章推荐
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
用Django实现一个可运行的区块链应用
2018/03/08 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Django视图、传参和forms验证操作
2020/07/15 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
列车长先进事迹材料
2014/01/25 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
审计专业自荐信范文
2014/04/21 职场文书
小学科学教学计划
2015/01/21 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js