前言
近期项目中遇到 v-for 动态控制 input输入框显示的功能，但只有一个input框，使用v-model 绑定一个值会导致输入框内的所有值同步更改，那如何获取每个input框内的值呢 ? 废话不多说，先上图
主要思路
- 在
input上使用v-model绑定到数据源的其中一个字段 - 若后台没有该字段则自己动态添加一个并组装
页面如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app {
width: 100%;
margin-left: 500px;
margin-top: 100px;
}
.inputArea {
display: block;
margin: 6px 0;
height: 30px;
line-height: 30px;
}
.postData {
margin-top: 20px;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
.res {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<input type="text" class="inputArea" v-for="input in dataList" :key="input.id" v-model="input.model">
<div class="postData" @click="getInputListValue">获取输入值</div>
<div class="res" v-show="isShowResData">{{resData}}</div>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
dataList:[
{id:"1",model:""},
{id:"2",model:""},
{id:"3",model:""},
{id:"4",model:""},
{id:"5",model:""},
],
resData:[],
isShowResData:false,
}
},
methods:{
getInputListValue: function () {
for (let i = 0; i < this.dataList.length;i++) {
let res = this.dataList[i].model;
this.resData.push(res);
this.isShowResData = true;
}
}
}
})
</script>
</body>
</html>
写到最后
学无止境，希望本文可以帮到您，与君共勉，感谢。
