如何使用Vuejs在动态表单中迭代和修改数据

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

new Vue({
  el: '#app',
  data: {
    formData: [
      { name: '姓名', value: '' },
      { name: '年龄', value: '' },
      { name: '性别', value: '' }
    ]
  }
});

<div id="app">
  <form>
    <div v-for="item in formData" :key="item.name">
      <label>{{ item.name }}</label>
      <input v-model="item.value" type="text">
    </div>
  </form>
</div>

<div id="app">
  <form>
    <div v-for="item in formData" :key="item.name">
      <label>{{ item.name }}</label>
      <input v-model="item.value" type="text">
    </div>
    <button @click="updateData">修改数据</button>
  </form>
</div>

new Vue({
  el: '#app',
  data: {
    formData: [
      { name: '姓名', value: '' },
      { name: '年龄', value: '' },
      { name: '性别', value: '' }
    ]
  },
  methods: {
    updateData() {
      // 在这里可以修改表单数据
      // 例如：this.formData[0].value = 'John'
    }
  }
});