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中的一些定位属性[图解]
Jul 14 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
简单了解JavaScript弹窗实现代码
May 07 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 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python中的列表知识点汇总
2015/04/14 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
五四青年节演讲稿
2014/05/26 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
解决Redis启动警告问题
2022/02/24 Redis