v-for的表单怎么使用computed使用vue实现

v-for可以用于循环渲染表单，例如下面的代码：

<template>
  <div>
    <form>
      <div v-for="(item, index) in formItems" :key="index">
        <label :for="item.name">{{ item.label }}</label>
        <input :type="item.type" :id="item.name" v-model="item.value">
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { label: '姓名', type: 'text', name: 'name', value: '' },
        { label: '年龄', type: 'number', name: 'age', value: '' },
        { label: '性别', type: 'radio', name: 'gender', value: 'male', options: ['male', 'female'] },
        { label: '爱好', type: 'checkbox', name: 'hobby', value: [], options: ['游泳', '跑步', '健身'] },
      ],
    };
  },
  computed: {
    formData() {
      const data = {};
      this.formItems.forEach((item) => {
        data[item.name] = item.value;
      });
      return data;
    },
  },
};
</script>

上面的代码中，使用v-for循环渲染表单项，通过v-model绑定表单项的值。在computed中定义一个formData属性，将表单项的值组成一个对象返回。这样就可以通过formData来获取表单的数据了。