【vue+elementui】el-radio单选框默认选中以及v-model绑定值问题

最新推荐文章于 2025-04-17 17:02:05 发布

进击的小宋

最新推荐文章于 2025-04-17 17:02:05 发布

阅读量2.8w

点赞数 11

本文链接：https://blog.csdn.net/qq_44655358/article/details/113937363

版权

本文介绍了在使用Vue和ElementUI的el-radio组件时，如何处理单选框的默认选中状态以及v-model绑定动态数据的问题。通过将label属性绑定到接口返回的值，并利用v-bind实现动态赋值，成功实现了根据后台返回的true或false来显示'男'或'女'的默认选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
value 这个属性值放在radio里面没多大作用，
在radio单选框里面 lable 相当于 radio 的 value，由此删除代码中的value属性
调整为label绑定接口定义好的数值类型，前端展示的中文文本男&女直接写在标签中间

           <el-form-item label="性别">
              <el-radio-group v-model="form.gender" style="margin-bottom: 0">
                <el-radio label="false">男</el-radio>
                <el-radio label="true">女</el-radio>
              </el-radio-group>
            </el-form-item>

上述代码发现还是 radio 单选框还是没有选中后台返回的默认值，原因在于，上面 lable=“1” 这种写法数据是固定的，但是需要的是后台返回的动态数据，所以需要用到 v-bind，即 :lable=“true”

           <el-form-item label="性别">
              <el-radio-group v-model="form.gender" style="margin-bottom: 0">
                <el-radio :label="false">男</el-radio>
                <el-radio :label="true">女</el-radio>
              </el-radio-group>
            </el-form-item>