Vue循环中多个input绑定指定v-model
时间: 2023-07-06 15:08:24 浏览: 126
Vue循环中多个input绑定指定v-model实例
可以使用一个数组来存储每个input的值,并使用v-for指令循环渲染多个input,然后将每个input的值绑定到对应的数组元素上,这样就可以实现多个input绑定特定的v-model了。例如:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<input v-model="inputValues[index]" type="text">
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['item1', 'item2', 'item3'],
inputValues: []
};
},
mounted() {
// 初始化inputValues数组,长度与items数组相同
this.inputValues = new Array(this.items.length).fill('');
}
};
</script>
```
在上面的示例中,我们使用v-for循环渲染了三个input,同时定义了一个inputValues数组,用于存储每个input的值。在mounted钩子函数中,我们初始化了inputValues数组,让它的长度与items数组相同,并将每个元素的初始值设为''。这样,每个input的v-model就可以绑定到对应的inputValues数组元素上了。
阅读全文