-
- data() {
- return {
- formItems: []
- }
- }
- <template>
- <div>
- <div v-for="(item, index) in formItems" :key="index">
- <input type="text" v-model="item.value">
- <button @click="removeFormItem(index)">删除button>
- div>
- <button @click="addFormItem">添加表单项button>
- div>
- template>
- methods: {
- addFormItem() {
- this.formItems.push({ value: '' });
- },
- removeFormItem(index) {
- this.formItems.splice(index, 1);
- }
- }
这样,每点击一次 “添加表单项” 按钮,就会新增一个表单项,并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除” 按钮可以移除对应的表单项。