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