Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例
Vue.js中提供了v-model可以雙向綁定表單元素,這個(gè)方法可以非常方便的獲得輸入的值,但是有時(shí)候表單元素需要循環(huán)生成,在循環(huán)中要怎樣獲得指定輸入框的值呢
這里介紹兩種：
一種是v-for中循環(huán)生成的輸入框,
一種是在element-table中生成的輸入框
在循環(huán)中只要給定的v-model不一致就可以為輸入框分別綁定,在循環(huán)中index每一項(xiàng)都是不一樣的,你也可以使用字符拼接的方式,設(shè)置v-model對(duì)應(yīng)的值為input1,input2..
類似這樣的,這樣就可以通過(guò)綁定的值取到對(duì)應(yīng)輸入框的值了,
在控制臺(tái)打印的結(jié)果:
還有一種場(chǎng)景是在表格中嵌套的input:
這樣的只用綁定表格的屬性就好了,這樣在打印出來(lái)的tableData中就可以拿到input的值
補(bǔ)充知識(shí)：Vue.js 關(guān)于v-for動(dòng)態(tài)綁定v-model，并實(shí)時(shí)獲取input輸入值和索引
如何動(dòng)態(tài)綁定V-model
今天在嘗試綁定的時(shí)候出來(lái)很多問題，而找了很多博客，描述的比較亂。
于是記錄一下我的解決方法
動(dòng)態(tài)綁定V-model
<el-form> <el-form-item v-for="(item,index) in form" :key="index" :label="item.title"> <el-input v-model="item.modelName" @input.native="change($event,index)" :placeholder="item.placeholder"></el-input> </el-form-item> </el-form>
data() {
return {
form: [
{
title: "用戶名",
placeholder: "輸入用戶名",
modelName:'h'
},
{
title: "密碼",
placeholder: "輸入密碼",
modelName:'2'
},
{
title: "確認(rèn)密碼",
placeholder: "再次輸入密碼",
modelName:'3'
}]
};
}
其實(shí)v-for動(dòng)態(tài)綁定model和綁定其他元素沒有大多差別，只要一點(diǎn)需要注意一下，正常動(dòng)態(tài)綁定需要在屬性前加：（v-on）這個(gè)語(yǔ)法糖，唯獨(dú)綁定v-model時(shí)不用添加，在寫的時(shí)候也是糾結(jié)了半天，至于原因我還沒有查找，希望有評(píng)論大神指出。
獲得鍵盤實(shí)時(shí)輸入的值和input輸入框的索引
輸入值實(shí)時(shí)獲取
<el-input v-model="item.modelName" @input.native="change($event,index)" :placeholder="item.placeholder"></el-input>
通過(guò)@input.native來(lái)監(jiān)聽輸入框?qū)崟r(shí)輸入的值，注意：需要添加.native后綴。
VUE官網(wǎng)有相應(yīng)解釋（鏈接）
獲得索引
methods: {
change: function(e,index) {
console.log(e.target.value);//實(shí)時(shí)獲取輸入值
console.log(index);//獲取點(diǎn)擊輸入框的索引
}
}
以上這篇Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作,本文給大家介紹Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧2023-12-12
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue移動(dòng)端下拉刷新組件的使用教程，每一次我在使用vant組件庫(kù)里面list組件和下拉刷新連在一起用的時(shí)候都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突，這就很難受，這篇文章將解決它2023-04-04
今天小編就為大家分享一篇Vue 監(jiān)聽列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在本篇文章里小編給大家分享了關(guān)于VUE中使用MUI方法和步驟，有需要的朋友們可以學(xué)習(xí)參考下。2019-02-02
這篇文章主要介紹了vue之子組件如何修改父組件的值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了初探Vue3.0 中的一大亮點(diǎn)Proxy的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選和反選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會(huì)將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對(duì)public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中，對(duì)于table框架，有一個(gè)篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11