v-for循环两个表单

在Vue.js中，`v-for`指令可以用来迭代数据列表，并创建相应的DOM元素。如果你想在一个模板中同时处理两个表单，你可以这样做：

<template>
  <div>
    <!-- 表单一 -->
    <form v-for="(formOneItem, index) in formOneList" :key="index">
      <label>{{ formOneItem.label }}</label>
      <input type="text" v-model="formOneItem.value">
      <!-- 其他表单元素... -->
    </form>

    <!-- 表单二 -->
    <form v-for="(formTwoItem, index) in formTwoList" :key="index">
      <label>{{ formTwoItem.label }}</label>
      <textarea v-model="formTwoItem.value"></textarea>
      <!-- 其他表单元素... -->
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formOneList: [
        { label: '表单一字段1', value: '' },
        { label: '表单一字段2', value: '' },
      ],
      formTwoList: [
        { label: '表单二字段1', value: '' },
        { label: '表单二字段2', value: '' },
      ]
    }
  }
}
</script>

在这个例子中，我们有两个数组 `formOneList` 和 `formTwoList`，分别代表两个表单的数据结构。每个循环会渲染对应表单的一行，`v-model`用于双向绑定输入框的值到对应的数组元素。