在ant design vue 中点击按钮动态添加input框
时间: 2023-05-18 18:07:18 浏览: 132
Ant Design Vue 添加区分中英文的长度校验功能
您可以使用Ant Design Vue中的Form组件来实现动态添加input框。您可以在Form组件中使用v-for指令来遍历一个数组,然后使用v-model指令将每个input框与数组中的元素绑定。当您点击添加按钮时,您可以使用JavaScript将一个新元素添加到数组中,这将自动添加一个新的input框到表单中。以下是示例代码:
```
<template>
<a-form>
<a-form-item v-for="(item, index) in items" :key="index">
<a-input v-model="items[index]" />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="addItem">添加</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
data() {
return {
items: ['']
}
},
methods: {
addItem() {
this.items.push('')
}
}
}
</script>
```
阅读全文