面试题：Vue中如何使用v - model实现简单动态表单元素（如输入框）的数据绑定并生成动态表单结构？

Question

假设你要创建一个用户信息录入表单，包含用户名和邮箱输入框，且这些输入框数量是动态变化的（由一个数组控制）。请用Vue代码示例说明如何通过v - model进行数据绑定，以及如何动态生成这些输入框。

Answer 1

<template>
  <div>
    <div v-for="(item, index) in userInfoArray" :key="index">
      <label for="username{{index}}">用户名:</label>
      <input type="text" :id="`username${index}`" v-model="item.username">
      <label for="email{{index}}">邮箱:</label>
      <input type="email" :id="`email${index}`" v-model="item.email">
    </div>
    <button @click="addUserInfo">添加一组</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfoArray: [
        { username: '', email: '' }
      ]
    };
  },
  methods: {
    addUserInfo() {
      this.userInfoArray.push({ username: '', email: '' });
    }
  }
};
</script>