Vue循环中多个input绑定指定v-model实例

Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种： 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框的值了, 在控制台打印的结果: 还有一种场景是在表格中嵌套的input: 这样的只用绑定表格的 在Vue.js中，`v-model` 是用于实现数据双向绑定的关键指令，它使得视图层与数据层之间的交互变得简单。然而，当需要在循环中创建多个表单元素，如`input`，并希望每个输入框都有自己的独立绑定时，就需要采取特定策略。下面将详细介绍在循环中为多个`input`绑定指定`v-model`实例的两种方法。 ### 方法一：`v-for`循环中的`v-model` 1. **使用循环变量**：在`v-for`循环中，我们可以利用`index`作为循环变量，为每个`input`设置不同的`v-model`。例如： ```html <div v-for="(item, index) in items"> <input type="text" v-model="inputValues[index]" /> </div> ``` 这里，`items`是数组，`inputValues`是一个与`items`长度相同的数组，用来存储每个输入框的值。 2. **字符拼接**：另一种方式是基于字符串动态生成`v-model`的名称，如`v-model="input + index"`，其中`input`是一个字符串，如`'input'`，这样生成的`v-model`就会依次是`input0`、`input1`等。 ### 方法二：Element UI的`el-table`中绑定`v-model` 如果你在使用Element UI的表格组件`el-table`，并且要在表格单元格内嵌入`input`，可以这样做： ```html <el-table :data="tableData"> <el-table-column prop="name"> <template slot-scope="scope"> <el-input v-model="scope.row.inputValue" @input="handleInput"></el-input> </template> </el-table-column> </el-table> ``` 这里，`tableData`是包含表格数据的数组，每个对象都有一个`inputValue`属性用于存储输入框的值。`@input="handleInput"`监听输入事件，`handleInput`方法可以接收输入事件和当前行的索引，从而更新相应的数据。 ### 动态绑定`v-model`和实时获取输入值 在动态绑定`v-model`时，`v-model`的值可以直接是对象的属性，如`v-model="item.modelName"`。这样，当你在输入框中键入内容时，对应的`item.modelName`会自动更新，实现了数据的双向绑定。 为了实时获取输入框的值和索引，可以监听`input`事件，例如： ```html <el-input v-model="item.modelName" @input.native="change($event, index)" :placeholder="item.placeholder" ></el-input> ``` 在`methods`中定义`change`方法： ```javascript methods: { change(e, index) { console.log(e.target.value); // 实时获取输入值 console.log(index); // 获取输入框的索引 } } ``` 这里的`@input.native`用于监听原生的`input`事件，因为Vue的修饰符`.native`允许我们在组件上监听原生事件。`e.target.value`可以获取到输入框的当前值，`index`则用于标识输入框在循环中的位置。 总结来说，Vue.js 提供了灵活的机制来处理循环中的数据绑定，无论是简单的数组索引还是更复杂的对象属性，都能确保每个`input`都有其独立的数据绑定。同时，通过监听`input`事件，我们可以实时跟踪用户输入，实现对数据的即时响应。