用vue3.0写 from表单

以下是一个简单的 Vue 3.0 表单示例：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label>
      <input id="name" type="text" v-model="name" required>
    </div>
    <div>
      <label for="email">Email:</label>
      <input id="email" type="email" v-model="email" required>
    </div>
    <div>
      <label for="message">Message:</label>
      <textarea id="message" v-model="message"></textarea>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('')
    const email = ref('')
    const message = ref('')

    function submitForm() {
      // 处理表单提交
    }

    return {
      name,
      email,
      message,
      submitForm
    }
  }
}
</script>

在这个例子中，我们使用了 Vue 3.0 的 `ref` 函数来创建了三个响应式变量 `name`、`email` 和 `message`，它们分别绑定了三个输入框的值。在 `submitForm` 函数中，我们可以处理表单提交的逻辑，例如验证用户输入、向服务器发送请求等等。

注意表单的 `submit` 事件需要使用 `.prevent` 修饰符来阻止默认的提交行为，这样我们才能在 `submitForm` 函数中自定义表单提交的行为。此外，我们还可以使用 HTML5 表单验证属性（例如 `required`、`type="email"` 等）来增强表单的验证功能。