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