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 相关文章推荐
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
vue组件的写法汇总
Apr 12 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
vue实现表格过滤功能
Sep 27 Javascript
React如何创建组件
Jun 27 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
使用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 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python 调用HBase的简单实例
2016/12/18 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python reques接口测试框架实现代码
2020/07/28 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
实习单位接收函
2014/01/11 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
领导班子四风表现材料
2014/08/23 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python闭包的定义和使用方法
2022/04/11 Python