vue radio

<template>
  <div>
    <h3>选择性别</h3>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">男</label><br>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">女</label><br>
    <p>你选择了: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了两个 input 元素，类型为 radio，并通过 v-model 指令将其绑定到 Vue 实例的 gender 数据属性上。
   • 每个 input 元素都有一个唯一的 id 和对应的 label，以提高可访问性。
   • 最后通过插值表达式 {{ gender }} 动态显示当前选中的性别。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，并在 data 函数中返回一个对象，其中包含 gender 属性，初始值为空字符串。

3. 样式部分 (<style scoped>):

   • 这里留空，可以根据实际需求添加样式。

这个示例展示了如何使用 Vue.js 创建一个简单的单选按钮组，并将用户的选择绑定到数据模型中。