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中的变量使用说明
May 18 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
js数组去重的hash方法
Dec 22 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
微信小程序提交form操作示例
Dec 30 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 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中如何调用用户自定义函数
2013/08/06 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS实现页面内跳转的简单代码
2017/09/03 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
美容院店长岗位职责
2014/04/08 职场文书
小学亲子活动总结
2014/07/01 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python