写一个vue3点击新增添加一个输入框两个按钮

要在Vue3中创建一个简单的组件，允许用户点击新增按钮动态添加一个包含输入框和两个按钮的新行，可以按照以下步骤编写。假设我们创建一个名为`AddRow.vue`的组件：

<template>
  <div>
    <button @click="addInputField">新增</button>
    <div v-for="(item, index) in inputFields" :key="index">
      <input type="text" v-model="inputFields[item].content" />
      <button @click="handleButtonOne(item)">按钮一</button>
      <button @click="handleButtonTwo(item)">按钮二</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputFields: [{ content: '' }],
    };
  },
  methods: {
    addInputField() {
      this.inputFields.push({ content: '' });
    },
    handleButtonOne(index) {
      console.log(`处理第${index}行的第一个按钮`);
      // 在这里添加具体的业务逻辑
    },
    handleButtonTwo(index) {
      console.log(`处理第${index}行的第二个按钮`);
      // 在这里添加具体的业务逻辑
    },
  },
};
</script>

在这个例子中，`data`中初始化了一个数组`inputFields`，用于存储每个输入框的内容。每当用户点击“新增”按钮，会使用`push`方法在数组中添加一个新的空对象。

`methods`部分定义了两个事件处理器：`handleButtonOne`和`handleButtonTwo`，它们分别对应于每行的两个按钮。你可以在这里添加实际的业务逻辑，比如修改内容、发送请求等。