Vue 實現(xiàn)把表單form數(shù)據(jù) 轉化成json格式的數(shù)據(jù)
更新時間：2019年10月29日 14:10:58 作者：小道仙
今天小編就為大家分享一篇Vue 實現(xiàn)把表單form數(shù)據(jù) 轉化成json格式的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
目的：Vue 中 把表單form數(shù)據(jù) 轉化成json格式的數(shù)據(jù)
第一步：創(chuàng)建一個數(shù)據(jù)集（就是你表單需要的數(shù)據(jù)）
如果你表單都是一些正常的數(shù)據(jù)，比如 text 什么的。你定義好數(shù)據(jù)集，就去用 v-model 綁定數(shù)據(jù)。這樣就可以實現(xiàn)數(shù)據(jù)同步了。
數(shù)據(jù)集
v-model綁定
如果你的數(shù)據(jù)不全是這種可以用 v-model 綁定的數(shù)據(jù)，比如我這個里面需要獲取一個 img 的 src 的值。那么下面就需要你想辦法把數(shù)據(jù)給綁定上去了
第二步：轉化json
上面第一步，我們已經(jīng)通過 自動 + 手動 的方式把我們需要的數(shù)據(jù)給獲取到了。下面我們只需要一個方法就可以轉成json了。
console.log(JSON.stringify(this.inputForm))
以上這篇Vue 實現(xiàn)把表單form數(shù)據(jù) 轉化成json格式的數(shù)據(jù)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vuex實現(xiàn)歷史記錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
搭建vue3項目以及按需引入element-ui框架組件全過程
element是基于vue.js框架開發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關于搭建vue3項目以及按需引入element-ui框架組件的相關資料,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
計算屬性是Vue中比較好用的API，開發(fā)者可以利用計算屬將復雜的計算進行緩存，同時基于它的響應式特性，我們無需關注數(shù)據(jù)更新問題，但需要注意的是，計算屬性是惰性求值的，本文將詳細介紹計算屬性的實現(xiàn)原理,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權限控制思考與實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue組件通信傳值操作,結合實例形式分析了vue.js父子組件通信及兄弟組件通信相關操作技巧,需要的朋友可以參考下2019-01-01
本篇文章主要介紹了Vue的百度地圖插件嘗試使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3的setup在el-tab中動態(tài)加載組件的方法
公司某項目需求在頁面顯示的組件是根據(jù)角色變化而變化的，怎么實現(xiàn)這個效果呢，下面小編給大家介紹下Vue3的setup在el-tab中動態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Element布局組件el-row和el-col的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue3.0 自適應不同分辨率電腦的操作,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02