這里講解一個vue生成表單的簡單實例：

（圖一）

（圖二）

（圖三）

---

如上圖所示：

• 圖一： 空的輸入框的情況
• 圖二： 點擊 “+” 添加生成表單的情況
• 圖三： 表單中可以輸入值，并且可以點擊“—”刪除和點擊“+”添加

---

View層

<el-row:gutter="20" ><el-col :span="3"><div class="item-title"><span class="text-red">*</span> 分享鏈接:</div></el-col><el-col :span="5"><div class="item-msg"><el-inputv-model.trim="data.link"placeholder="輸入內容"size="mini"clearable/></div></el-col></el-row><!-- 添加按鈕 --><el-row:gutter="20" ><el-col :span="3"><divclass="item-title"@click = "addShareLink"><i class="el-icon-circle-plus"/></div></el-col></el-row><!-- 動態添加參數 --><el-rowv-for="(todo,index) in shareParams":key="index"><el-row :gutter="20"><el-col :span="3"><divclass="item-title"@click = "removeParam(index)"><i class="el-icon-remove"/></div></el-col><el-col:span="1"style="margin-top:10px;margin-right:20px;">參數:</el-col><el-col:span="3"style="margin-left: -38px;"><el-inputv-model.trim="todoObj[todo.value]"placeholder="輸入內容"size="mini"clearable/></el-col><el-col :span="3"><el-selectv-model="todoObj[todo.type]"placeholder="請選擇類型"><el-optionv-for="(item, index) in choose":key="index":label="item.label":value="item.value"/></el-select></el-col></el-row></el-row>

---

JS層

export default {methods: {// 添加分享鏈接參數addShareLink() {this.index += 1;this.shareParams.push({id: this.index,value: `link${this.index}`,type: `type${this.index}`});},// 刪除分享參數removeParam(index) {this.shareParams.splice(index, 1);},}，data() {return {index：0,shareParams: [],todoObj: {},data: {link: ""}}}}

上面是對數據生成的處理，但是如果按照我中思路處理，最后提交是一個問題，所以在這里我要在寫一個提交時數據格式化的函數：

//提交的時候調用formatURL傳入上面定義的 todoObj進行格式化formatURL(obj) {let url = "";const tempArr = [];const arr = Object.keys(obj);let leng = 0;arr.map(item => {if (item.slice(-1) * 1 > leng) {leng = item.slice(-1) * 1;}});for (let i = 1; i <= leng; i += 1) {const obj1key = arr.filter(item => item.slice(-1) * 1 === i);const obj1 = {};obj1key.map(item => {obj1[item] = obj[item];});tempArr.push(obj1);}tempArr.forEach(v => {Object.keys(v).map(key => {url += `${key}=${v[key]}&`;});});url = url.substring(0, url.length - 1);return `${this.data.link}?${url}`;},

最后轉換的格式為：

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

上面是一個動態生層表單元素的基本形式，該代碼可以直接移至到自己的項目中。

總結

以上是生活随笔為你收集整理的vue动态生成表单元素基础篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。