vue3 弹出框v-model 选择男女

好的，针对这个问题，我可以给你提供一个 Vue 3 的示例代码，实现弹出框中选择男女并绑定到 v-model。

在 Vue 3 中，我们可以使用 `defineComponent` 函数来定义一个组件，然后在模板中使用 `v-model` 指令实现双向绑定。

示例代码如下：

<template>
  <div>
    <button @click="showModal = true">打开弹出框</button>
    <div v-if="showModal">
      <div>
        <label>
          <input type="radio" value="male" v-model="gender">男
        </label>
        <label>
          <input type="radio" value="female" v-model="gender">女
        </label>
      </div>
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const showModal = ref(false)
    const gender = ref('male')

    const submit = () => {
      // 在这里可以获取到用户选择的性别，进行下一步处理
      console.log(gender.value)
      showModal.value = false
    }

    return {
      showModal,
      gender,
      submit
    }
  }
})
</script>

在上面的代码中，我们使用 `defineComponent` 函数定义了一个组件。在 `setup` 函数中，我们使用 `ref` 函数定义了 `showModal` 和 `gender` 两个响应式变量，并且初始化为 `false` 和 `'male'`。

在模板中，我们使用了两个 radio 组件，并且通过 `v-model` 指令将 `gender` 变量和用户选择的值进行双向绑定。

当用户点击提交按钮时，我们可以通过 `gender.value` 获取到用户选择的性别，并进行下一步处理。同时，我们将 `showModal.value` 变量设置为 `false`，来关闭弹出框。

希望这个示例代码可以帮助你解决问题。如果你有其他问题，可以继续提问。