写一个vue3点击新增添加一个输入框和下拉框选项

好的，以下是一个简单的 Vue 3 组件示例，点击“新增”按钮可以动态添加一个输入框和一个下拉框选项：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <input type="text" v-model="item.text">
      <select v-model="item.select">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>
    </div>
    <button @click="addNewItem">新增</button>
  </div>
</template>

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

export default {
  setup() {
    const list = ref([{ text: '', select: 'option1' }]);

    const addNewItem = () => {
      list.value.push({ text: '', select: 'option1' });
    };

    return {
      list,
      addNewItem,
    };
  },
};
</script>

在这个示例中，使用了 Vue 3 的 `ref` 函数来创建了一个响应式的 `list` 变量，表示当前的输入框和下拉框列表。在模板中使用 `v-for` 指令循环渲染列表中的每一项，同时使用 `v-model` 指令实现数据的双向绑定。

在点击“新增”按钮时，调用 `addNewItem` 方法，向 `list` 中添加一个新的空对象，表示新增的输入框和下拉框。这个新的对象也会被 Vue 自动响应式地处理，从而实现动态添加新的输入框和下拉框选项的功能。