动态增减表单vue(动态表单 vue)

动态增减表单是指在网页中可以根据用户的操作动态地增加或减少表单项的功能。在Vue中，可以通过使用v-for指令和数组来实现动态增减表单。

我们需要在Vue实例的data属性中定义一个数组，用于存储表单项的数据。每个表单项可以是一个对象，包含多个属性，如name、age等。然后，我们可以使用v-for指令将数组中的每个元素渲染为一个表单项。

下面是一个示例代码，演示了如何实现动态增减表单：

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <input type="text" v-model="item.name" placeholder="姓名">
      <input type="number" v-model="item.age" placeholder="年龄">
      <button @click="removeFormItem(index)">删除</button>
    </div>
    <button @click="addFormItem">新增</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formItems: [
        { name: '', age: '' }
      ]
    }
  },
  methods: {
    addFormItem() {
      this.formItems.push({ name: '', age: '' });
    },
    removeFormItem(index) {
      this.formItems.splice(index, 1);
    }
  }
}
</script>

在上面的代码中，我们首先在data属性中定义了一个formItems数组，数组中包含了一个空的表单项对象。在模板中，我们使用v-for指令将formItems数组中的每个元素渲染为一个表单项，通过v-model指令实现双向绑定，使得用户在输入框中输入的内容能够同步到表单项对象中。

在模板的我们添加了一个“新增”按钮，通过点击按钮触发addFormItem方法，在formItems数组中新增一个空的表单项对象。每个表单项后面还有一个“删除”按钮，通过点击按钮触发removeFormItem方法，将对应的表单项从formItems数组中移除。

通过以上的代码，我们实现了一个简单的动态增减表单功能。用户可以根据需要动态地增加或减少表单项，使得网页的表单更加灵活和可扩展。这种方式在实际开发中非常常见，可以用于实现各种表单、问卷调查等功能。