vue動態生成表單元素基礎篇

（圖一）

（圖二）

（圖三）

如上圖所示：

view層

:gutter=

"20"
>
"3">
="item-title"
>
="text-red"
>
*<
/span> 分享鏈結:
<
/div>
<
/el-col>
"5">
="item-msg"
>
v-model.trim=
"data.link"
placeholder=
"輸入內容"
size=
"mini"
clearable/
>
<
/div>
<
/el-col>
<
/el-row>
<
!-- 新增按鈕 --
>
:gutter=
"20"
>
"3">
class
="item-title"
@click =
"addsharelink"
>
="el-icon-circle-plus"
/>
<
/div>
<
/el-col>
<
/el-row>
<
!-- 動態新增引數 --
>
v-for=
"(todo,index) in shareparams"
:key=
"index"
>
"20"
>
"3">
class
="item-title"
@click =
"removeparam(index)"
>
="el-icon-remove"
/>
<
/div>
<
/el-col>
:span=
"1" style=
"margin-top:10px;margin-right:20px;"
>
引數:<
/el-col>
:span=
"3" style=
"margin-left: -38px;"
>
v-model.trim=
"todoobj[todo.value]"
placeholder=
"輸入內容"
size=
"mini"
clearable/
>
<
/el-col>
"3">
v-model=
"todoobj[todo.type]"
placeholder=
"請選擇型別"
>
v-for=
"(item, index) in choose"
:key=
"index"
:label=
"item.label"
:value=
"item.value"
/>
<
/el-select>
<
/el-col>
<
/el-row>
<
/el-row>js層
export

type:

`type$`

});},

// 刪除分享引數

removeparam

(index),}，

data()

, data:}}

}上面是對資料生成的處理，但是如果按照我中思路處理，最後提交是乙個問題，所以在這裡我要在寫乙個提交時資料格式化的函式：

//提交的時候呼叫formaturl傳入上面定義的 todoobj進行格式化

(obj)})

;for

(let i =

1; i <= leng; i +=1)

; obj1key.

map(item =>);

temparr.

push

(obj1);}

temparr.

foreach

(v =>=$

&`;})

;});

url = url.

substring(0

, url.length -1)

;return`$

?$`;

},最後轉換的格式為：

234567878888？type1=熱熱&link1=必填&type2=熱熱&link2=非必填&type3=熱女&link2=非必填

Vue 表單元素繫結

文字框 輸入的內容繫結到 name text v model name 下拉框 資料從data的 tt 中讀取 選擇的結果繫結到 select value select value 0 請選擇 option for v,k in tt v bind key k value v.value optio...

VUE 表單元素雙向繫結總結

以下語法基於vue1.0 checkbox最基本用法 new vue ready function 規則1 如果v model繫結的變數型別為boolean，若input被選中，this.inputdata為true,否則this.inputdata為false。如上圖 inputdata變數初始設...

vue動態生成表單元件vue form maker

vue動態生成表單元件 可以根據資料配置表單 使用的ui庫是iview 在vue裡 一般要用到什麼元件或資料 都得提前宣告 所以要根據資料來生成表單 只能使用vue的render函式 要做這乙個元件 其實並不難 看一下vue官方示例 再找個ui元件庫 差不多就能寫出來 如果對專案有興趣 可以fork...