vue实现一个输入框输入数值,在下面根据数值生成对应数量输入框,并将生成的输入框内容放到一个数组中
时间: 2023-11-27 19:53:51 浏览: 67
vue实现将一个数组内的相同数据进行合并
可以通过监听输入框的值变化事件,然后根据输入框的值动态生成对应数量的输入框。在生成的输入框中,可以通过 v-model 绑定每个输入框的值,在输入框的值改变时将其放入一个数组中。
下面是一个实现的示例代码:
```html
<template>
<div>
<label>请输入数量:</label>
<input type="number" v-model="count" @input="generateInputFields" />
<div v-for="(item, index) in inputFields" :key="index">
<label>输入框{{index + 1}}:</label>
<input type="text" v-model="item.value" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
inputFields: [],
};
},
methods: {
generateInputFields() {
this.inputFields = [];
for (let i = 0; i < this.count; i++) {
this.inputFields.push({ value: "" });
}
},
},
};
</script>
```
在上面的示例代码中,我们首先在 `data` 中定义了一个 `count` 变量和一个空数组 `inputFields`,用于保存动态生成的输入框的值。然后,我们在输入框中通过 `v-model` 绑定 `count` 变量,监听其值变化事件 `@input`,并在事件处理函数 `generateInputFields` 中生成对应数量的输入框。
在 `generateInputFields` 方法中,我们先清空 `inputFields` 数组,然后使用 `for` 循环生成对应数量的输入框,并将其放入 `inputFields` 数组中。在动态生成的输入框中,我们通过 `v-for` 遍历 `inputFields` 数组,生成对应数量的输入框,并通过 `v-model` 绑定每个输入框的值,将其放入 `inputFields` 数组中。
阅读全文