極簡屬性：data

(僅提供方法和極簡示例，實踐黨可自行擴展，伸手黨請繞行)

表單組件通用

注：此data是組件的一個隱藏屬性

示例：

template：

{{sexs[grouplist.sexIndex].name}}

data：

sexs: [{name: "男"},{name: "女"}],

grouplist: {

name:'',

sexIndex:0

}

method：

inputInfo(e) {

let type = e.target.dataset.type // e.target.dataset.type中的type就是data-type中的參數

this.grouplist[type] = e.target.value // 給對象參數動態賦值

}

只需要這一個方法即可取代之前很多重復性的賦值工作，復用性極高

你可以叫 data-type 也可以起一個自己喜歡的 data-man 等等

缺點：這種template寫法需要預置很多重復性的模板組件

解決思路：用 v-for 對 data-type 進行動態賦值，每個組件預置一次動態取用即可，但內部模板組件取用條件需自行書寫判斷邏輯。

有興趣的道友還可以自行擴展。

總結

以上是生活随笔為你收集整理的uniapp 表单页面_uniapp自定义表单模板经验分享的全部內容，希望文章能夠幫你解決所遇到的問題。

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