vue.js3中v-model和v-for动态表单案例代码

在Vue.js 3中，`v-model` 和 `v-for` 配合通常用于创建动态表单，比如一个可以添加和删除行的表格。这里有一个简单的例子，假设我们有个数据数组，每个元素代表表格的一行：

<template>
  <div id="dynamic-form">
    <button @click="addRow">Add Row</button>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <!-- 添加按钮 -->
          <th>Action</th>
        </tr>
      </thead>
      <tbody v-for="(item, index) in items" :key="index">
        <tr>
          <td><input type="text" v-model="item.name"></td>
          <td><input type="email" v-model="item.email"></td>
          <!-- 删除按钮 -->
          <td>
            <button @click="removeItem(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: '', email: '' }],
    };
  },
  methods: {
    addRow() {
      this.items.push({ name: '', email: '' });
    },
    removeItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

在这个示例中，`v-model` 实现了双向数据绑定，用户输入的数据会实时反映到数据模型上。`v-for` 则迭代渲染每一行，`addItem` 方法用于追加新行，`removeItem` 方法则删除指定索引的行。