vue遍歷生成的輸入框 綁定及修改值示例
更新時間：2019年10月30日 10:55:19 作者：StevenDIY
今天小編就為大家分享一篇vue遍歷生成的輸入框 綁定及修改值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
對于vue遍歷生成的輸入框進(jìn)行其值的修改與保存是vue項目開發(fā)過程中的一種常規(guī)操作。這種操作的難點(diǎn)在于生成數(shù)量的不確定，不能在在組件中的data直接定義。
思路
獲取生成的輸入框數(shù)量
初始化數(shù)組，數(shù)組的長度與待綁定輸入框數(shù)量一致
將每一個輸入框的v-model與數(shù)組特定項進(jìn)行綁定
實(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="請輸入內(nèi)容"
clearable
size="small"
/>
以上這篇vue遍歷生成的輸入框 綁定及修改值示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue中keep-alive多級路由緩存問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
詳解vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解
最近有項目需要用到對圖片進(jìn)行局部放大,類似淘寶商品頁的放大鏡效果,經(jīng)過一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue彈窗組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Win11&Win10配置vue開發(fā)環(huán)境詳細(xì)圖文教程
目前前端三大框架(vue、react、angular)中vue是前端工程師經(jīng)常使用的,在使用之前需要搭建vue開發(fā)環(huán)境,這篇文章主要給大家介紹了關(guān)于Win11&Win10配置vue開發(fā)環(huán)境的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue 兄弟組件的信息傳遞的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
本篇文章主要介紹了詳解webpack編譯多頁面vue項目的配置問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
證件圖片識別上傳根據(jù)業(yè)務(wù)需要，經(jīng)常涉及到證件上傳，例如身份證上傳、銀行卡、營業(yè)執(zhí)照等信息，根據(jù)設(shè)計師的設(shè)計，單獨(dú)封裝了一個上傳組件，這篇文章主要介紹了vue3?證件識別上傳組件封裝,需要的朋友可以參考下2023-05-05
在實(shí)際項目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01