vue遍歷生成的輸入框 綁定及修改值示例
更新時間：2019年10月30日 10:55:19 作者：StevenDIY
今天小編就為大家分享一篇vue遍歷生成的輸入框 綁定及修改值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
對于vue遍歷生成的輸入框進行其值的修改與保存是vue項目開發(fā)過程中的一種常規(guī)操作。這種操作的難點在于生成數(shù)量的不確定，不能在在組件中的data直接定義。
思路
獲取生成的輸入框數(shù)量
初始化數(shù)組，數(shù)組的長度與待綁定輸入框數(shù)量一致
將每一個輸入框的v-model與數(shù)組特定項進行綁定
實現(xiàn)代碼
1.data中定義一個存放model值的空數(shù)組
data() {
return {
inputData :[]
}
}
2.將獲取到的數(shù)組遍歷，將獲取到的值插入空數(shù)組
res.data.rows.map(v. => {
this.inputData.push(v.desc)
})
3.在template模板代碼的輸入框通過索引綁定數(shù)組的特定項
<el-input
v-model="inputData[index]"
placeholder="請輸入內容"
clearable
size="small"
/>
以上這篇vue遍歷生成的輸入框 綁定及修改值示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了詳解給Vue2路由導航鉤子和axios攔截器做個封裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue,angular,avalon這三種MVVM框架優(yōu)缺點
本文給大家具體分析了下vue,angular,avalon這三種MVVM框架優(yōu)缺點，十分的細致全面，有需要的小伙伴可以參考下2016-04-04
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了解決vue路由name同名,路由重復的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本篇文章主要介紹了詳解webpack編譯多頁面vue項目的配置問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue單文件組件開發(fā)實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了 vue 動態(tài)組件component ，vue提供了一個內置的<component>,專門用來實現(xiàn)動態(tài)組件的渲染，這個標簽就相當于一個占位符，需要使用is屬性指定綁定的組件，想了解更多詳細內容的小伙伴請參考下面文章的具體內容2021-11-11
cross-env 是一個非常實用的 Node.js 包,它允許你跨平臺（Windows, macOS, Linux）使用環(huán)境變量,這對于在不同的操作系統(tǒng)上運行腳本時保持一致性非常有用,這篇文章主要介紹了vue cross-env使用和配置方法,需要的朋友可以參考下2024-08-08
基于vue3?vue-cli4?線上部署及優(yōu)化的問題
這篇文章主要介紹了基于vue3?vue-cli4?線上部署及優(yōu)化的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue keepAlive緩存清除問題案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09