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控制Session操作方法
Jan 17 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
Bootstrap精简教程
Nov 27 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
Yii框架登录流程分析
2014/12/03 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
围观tangram js库
2010/12/28 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python help()函数用法详解
2014/03/11 Python
pycharm安装图文教程
2017/05/02 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python中zip函数如何使用
2020/06/04 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
工程监理应届生求职信
2013/11/09 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
就业协议书样本
2014/08/20 职场文书
2014年审计工作总结
2014/11/17 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers