Vue 实现把表单form数据 转化成json格式的数据

 更新时间:2019年10月29日 14:10:58   作者:小道仙  
今天小编就为大家分享一篇Vue 实现把表单form数据 转化成json格式的数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

目的:Vue 中 把表单form数据 转化成json格式的数据

第一步:创建一个数据集(就是你表单需要的数据)

如果你表单都是一些正常的数据,比如 text 什么的。你定义好数据集,就去用 v-model 绑定数据。这样就可以实现数据同步了。

数据集

v-model绑定

如果你的数据不全是这种可以用 v-model 绑定的数据,比如我这个里面需要获取一个 img 的 src 的值。那么下面就需要你想办法把数据给绑定上去了

第二步:转化json

上面第一步,我们已经通过 自动 + 手动 的方式把我们需要的数据给获取到了。下面我们只需要一个方法就可以转成json了。

console.log(JSON.stringify(this.inputForm))

以上这篇Vue 实现把表单form数据 转化成json格式的数据就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuex进阶知识点巩固

    vuex进阶知识点巩固

    本片文章是小编在网上整理的关于VUEX进阶的相关知识点内容,对此有兴趣的朋友可以跟着学习参考下。
    2018-05-05
  • vue解决刷新页面时会出现变量闪烁的问题

    vue解决刷新页面时会出现变量闪烁的问题

    这篇文章主要介绍了vue解决刷新页面时会出现变量闪烁的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue封装第三方插件并发布到npm的方法

    vue封装第三方插件并发布到npm的方法

    本篇文章主要介绍了vue封装第三方插件并发布到npm的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue3.0安装Element ui及矢量图使用方式

    vue3.0安装Element ui及矢量图使用方式

    这篇文章主要介绍了vue3.0安装Element ui及矢量图使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • Vue3实现点击按钮实现文字变色功能

    Vue3实现点击按钮实现文字变色功能

    这篇文章主要介绍了使用Vue3实现点击按钮实现文字变色功能,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • vue3为什么要用proxy替代defineProperty

    vue3为什么要用proxy替代defineProperty

    这篇文章主要介绍了vue3为什么要用proxy替代defineProperty,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue 防止页面加载时看到花括号的解决操作

    vue 防止页面加载时看到花括号的解决操作

    这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 基于Vue.js 实现简易拖拽指令

    基于Vue.js 实现简易拖拽指令

    在 Vue.js 中,我们可以通过自定义指令的方式来实现拖拽功能,使得代码更加模块化和可复用,本文将介绍如何基于 Vue.js 实现一个简易的拖拽指令,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • Vue如何根据id在数组中取出数据

    Vue如何根据id在数组中取出数据

    这篇文章主要介绍了Vue如何根据id在数组中取出数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue抽出组件并传值实例

    vue抽出组件并传值实例

    这篇文章主要介绍了vue抽出组件并传值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论