vue3中写一个form表单，里面有单选框和输入框

在Vue3中创建一个包含单选框和输入框的表单非常直观，可以使用模板、组件以及 Vue 的双向数据绑定特性来实现。这里是一个基本的例子：

<template>
  <div id="form">
    <h2>用户注册</h2>
    <form @submit.prevent="submitForm">
      <label for="username">用户名：</label>
      <input type="text" v-model="username" placeholder="请输入用户名" required>

      <!-- 单选框示例 -->
      <br>
      <label>性别：</label>
      <input type="radio" value="male" v-model="gender" :name="genderName" id="male">男
      <input type="radio" value="female" :name="genderName" id="female">女

      <!-- 提交按钮 -->
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      gender: '', // 初始值可根据需求设置，默认可能是空字符串
      genderName: 'gender', // 确保所有单选框有相同的 name 属性
    };
  },
  methods: {
    submitForm() {
      console.log('表单提交:', { username: this.username, gender: this.gender });
      // 在实际应用中，你可以将表单数据发送到服务器或者做进一步处理
    },
  },
};
</script>

在这个例子中，`v-model`指令用于双向数据绑定，当你在输入框或单选框上做出选择时，对应的属性值会实时更新。`@submit.prevent`阻止了表单默认的提交行为，并触发自定义的 `submitForm` 方法。