Vue3 表单创建示例：使用 v-model 和 表单验证

<template>
  <form @submit.prevent="submitForm">
    <label>
      Name:
      <input type="text" v-model="form.name" required>
    </label>
    <label>
      Email:
      <input type="email" v-model="form.email" required>
    </label>
    <label>
      Password:
      <input type="password" v-model="form.password" required>
    </label>
    <button type="submit">Submit</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      // Send form data to server
      console.log(this.form);
    }
  }
}
</script>
<p>这个表单包含三个输入字段：姓名、电子邮件和密码。每个输入字段都用<code>v-model</code>绑定到组件的数据对象中。<code>required</code>属性使每个输入字段都成为必填项。</p>
<p>当用户提交表单时，<code>submitForm</code>方法将被调用，并在控制台中打印出表单数据对象。在实际应用中，您可以将表单数据发送到服务器进行处理。</p>