vue3动态增加表单带下拉框的

Vue 3 提供了一种灵活的方式来动态增加带有下拉框的表单元素。Vue 3 的响应式系统和组件系统使得这样的操作变得简单。以下是一个基本的实现步骤：

1. 在组件的数据对象中定义一个数组，用于存储表单项的数据。
2. 使用 v-for 指令在模板中渲染出每个表单项。
3. 利用 Vue 的 v-model 指令绑定表单项的数据，使其与数据对象中的相应属性进行双向数据绑定。
4. 对于下拉框，可以使用 select 元素，并用 option 子元素来定义选项。
5. 根据需要，可以添加一个按钮用于动态增加新的表单项。

下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <input type="text" v-model="item.inputValue" />
      <select v-model="item.selectedValue">
        <option v-for="option in options" :key="option.value" :value="option.value">{{ option.text }}</option>
      </select>
      <button @click="removeItem(index)">移除</button>
    </div>
    <button @click="addItem">添加表单项</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const formItems = ref([{ inputValue: '', selectedValue: '' }]);
    const options = ref([{ value: 'option1', text: '选项1' }, { value: 'option2', text: '选项2' }]);

    const addItem = () => {
      formItems.value.push({ inputValue: '', selectedValue: '' });
    };

    const removeItem = (index) => {
      formItems.value.splice(index, 1);
    };

    return {
      formItems,
      options,
      addItem,
      removeItem
    };
  }
};
</script>

在这个示例中，`formItems` 是一个响应式数组，用于存储每个表单项的输入数据和下拉框的选中值。`addItem` 方法用于向 `formItems` 中添加新的对象，从而在界面上添加新的表单项。`removeItem` 方法用于从 `formItems` 中移除一个元素，以及它对应的表单项。