uniapp实现表单展示

在uniapp中，可以使用form组件来实现表单展示。具体步骤如下：

1. 在template中添加form组件，设置属性为report-submit="true"，这样可以在提交表单时触发submit事件。

2. 在form组件内部添加各种表单元素，如input、textarea、radio、checkbox等。

3. 在submit事件中获取表单数据，可以使用e.detail.value获取到一个对象，对象的属性名为表单元素的name属性值，属性值为表单元素的value属性值。

4. 将表单数据展示在页面上即可。

示例代码如下：

<template>
  <form report-submit="true" @submit="onSubmit">
    <div>
      <label>姓名：</label>
      <input type="text" name="name" />
    </div>
    <div>
      <label>性别：</label>
      <input type="radio" name="gender" value="male" />男
      <input type="radio" name="gender" value="female" />女
    </div>
    <div>
      <label>爱好：</label>
      <input type="checkbox" name="hobby" value="reading" />阅读
      <input type="checkbox" name="hobby" value="music" />音乐
      <input type="checkbox" name="hobby" value="sports" />运动
    </div>
    <div>
      <label>自我介绍：</label>
      <textarea name="introduction"></textarea>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit(e) {
      const formData = e.detail.value;
      console.log(formData);
      // 将表单数据展示在页面上
    },
  },
};
</script>