vue3怎么渲染form表单数据

在Vue 3中，要渲染form表单数据，可以使用Vue 3的Composition API来实现。首先，需要使用ref()函数创建一个响应式对象，用于存储表单数据。然后，在模板中通过v-model指令将表单元素和响应式对象绑定起来，实现双向数据绑定。最后，在表单提交时，可以通过响应式对象获取表单数据进行处理。示例代码如下：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="form.name">
    </div>
    <div>
      <label for="age">年龄：</label>
      <input type="number" id="age" v-model="form.age">
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="form.email">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref({
      name: '',
      age: '',
      email: ''
    });

    const handleSubmit = () => {
      console.log(form.value);
      // 处理表单数据的逻辑
    }

    return {
      form,
      handleSubmit
    }
  }
}
</script>

在上面的示例中，我们使用了ref()函数创建了一个名为form的响应式对象，它包含了三个属性：name、age和email，它们分别对应了表单中的三个输入框。在模板中，我们使用v-model指令将表单元素和响应式对象的属性进行了绑定，实现了双向数据绑定。在表单提交时，我们通过handleSubmit方法获取了表单数据，并进行了处理。需要注意的是，在Vue 3中，我们需要使用value属性来访问ref()函数创建的响应式对象的值。