在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或表格中。以下将详细介绍如何在Vue循环中为多个`input`元素绑定不同的`v-model`实例。
1. **独立的v-model绑定**：
当在`v-for`循环中生成多个`input`元素时，可以通过给每个`v-model`分配不同的值来实现不同`input`的独立绑定。例如，可以利用循环变量`index`或字符串拼接来创建唯一的`v-model`名。假设我们有一个数组`items`，每个`item`都有一个`value`属性，我们可以这样做：
```html
<div v-for="(item, index) in items" :key="index">
<input type="text" v-model="item.value + index" />
</div>
```
这样，每个`input`的`v-model`都会是`item.value`与`index`的组合，确保了每个`input`的绑定值是唯一的。
2. **在Element UI的`el-table`中使用v-model**：
如果你使用Element UI的`el-table`组件，可以在表格列的模板中直接绑定`v-model`。比如，每个表格行都有一个`data`对象，你可以将`v-model`绑定到该对象的某个属性上：
```html
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<el-input v-model="scope.row.name"></el-input>
</template>
</el-table-column>
```
这里，`scope.row`是当前行的数据，`name`是数据对象中的属性。当你在输入框中输入时，表格数据会自动更新。
3. **动态绑定v-model并实时获取输入值和索引**：
要动态绑定`v-model`并监听输入值的变化，可以在`v-for`循环中使用`@input`事件。例如：
```html
<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: "确认密码", placeholder: "再次输入密码", modelName: '3' }
]
};
},
methods: {
change(e, index) {
console.log(e.target.value); // 实时获取输入值
console.log(index); // 获取点击输入框的索引
}
}
```
在这个例子中，`change`方法会在每次输入改变时被调用，通过`$event.target.value`获取输入值，`index`参数则用于标识是哪个`input`触发了事件。
Vue.js的`v-model`配合`v-for`指令可以方便地处理动态生成的表单元素，并通过事件监听实时获取输入值和对应的索引。这种方法在构建动态表单和数据编辑界面时尤其有用。记得在使用`v-model`时，不需要使用`v-on:`前缀，因为`v-model`已经内建了事件绑定逻辑。
