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

最新推荐文章于 2024-05-18 19:47:53 发布
最新推荐文章于 2024-05-18 19:47:53 发布
阅读量2.8w 收藏 16
点赞数 11
文章标签： javascript vue elementui js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44655358/article/details/113937363
版权

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

           <el-form-item label="性别">
              <el-radio-group v-model="form.gender" style="margin-bottom: 0">
最低0.47元/天 解锁文章
进击的小宋
关注
  • 11
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
复选框可以使用`v-model`和`value`属性绑定一个数组，表示选中的值集合： ```html <input type="checkbox" v-model="checkedColors" value="red"> 红色 <input type="checkbox" v-model="checkedColors" value=...
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
在Vue中，`v-model`指令是实现数据双向绑定的关键特性之一，这使得UI（用户界面）与应用程序的状态能够实时同步，极大地简化了表单处理和动态数据更新。 双向绑定意味着当你在视图层（例如输入框、选择框或复选框）...
vue el-radio 单选传值和默认选中
qq_31517427的博客
03-18 8011
点击输入框,弹出子组件单选table
element plus单选框实现默认选中
hyy的博客
12-04 3468
element plus单选框实现默认选中
el-radio绑定失效问题记录
最新发布
m0_47594094的博客
05-18 164
el-radio进行单项选择的时候，发现绑定失效了，无法显示绑定值了
elementUI单选框radio传值
热门推荐
a932946893的博客
08-29 1万+
elementUI单选框radio传值问题 从后端查询到单选框的文本及id，在表单中遍历出单选按钮，在提交表单时需要向后台提交id而不是文本值 后台提供的单选数据： 原先写的代码： :label的值会绑定到v-model上，这样写的话传给后台的是文本值。 修改过后： <el-radio-group v-model="form.type_property"> &l...
el-select 和el-radio中 value类型不一致label不能选中
MyFreeIT
01-18 664
数据结构和数据库都是number类型，但是经过Rest Api获得后，value变成了string 类型，需要通过parseInt转化。el-radio 通过Label 匹配默认值，所以需要类型转换。
el-radio-button 设置默认选中问题
supming1的专栏
10-25 7330
el-radio-button官方给出的代码示例如下。 <template> <div> <el-radio-group v-model="radio1"> <el-radio-button label="上海"></el-radio-button> <el-radio-button label="北京"></el-radio-button> </el-radio-gr.
element ui根据返回数据动态实现多项单选及回显
卡卡西：一个擅长拷贝的前端程序员
06-18 2531
效果如下，数据都是接口返回的， 思路： element-ui 的单选<el-radio>标签，可通过 v-model 绑定变量来设置默认值，但上图这种效果，所有数据都是接口动态返回，不能预先在data中定义 每组单选 变量来设置默认值， 可在data中定义一个数组 qualitySelect，数据返回时，有几组数据向这个数组中push几个值，值为每组数据默认的选中值，注意，值必须为number类型，才会给<el-radio>的v-model赋值上 <tabl...
自学Vue必看的v-model知识总结(超详细)
01-08
文章目录基本概念基本使用v-model原理使用v-bindv-bind和v-on同时使用v-model结合radio使用v-model结合checkbox使用单选框多选框v-model结合select使用值绑定v-model修饰符lazy修饰符number修饰符trim修饰符 ...
Vue表单及表单绑定方法
10-18
Vue提供了`v-model`指令，使得在表单元素（如输入框、复选框、单选按钮等）与Vue实例的数据之间实现双向数据绑定变得简单。下面我们将深入探讨Vue中的表单绑定及其在不同类型的表单元素上的应用。 ### 基础用法 **...
element-ui的radio单选框动态渲染
weixin_73318685的博客
03-10 1566
根据后台返回的数据进行默认值绑定单选框选中，本文主要要注意的是radio的label值才是用户绑定后台定义的数据类型而不是value，其次是v-bind的正确使用。
Vue radio绑定数组中对象的属性，v-model 不更新值，解决办法
02-25 5892
Vue radio绑定数组中对象的属性，v-model 不更新值，解决办法 有一个项目中，我需要将数组中对象的属性绑定到 el-radio 上 数组的结构是这样的 dataOrigin: [ {id: 1, deviceType: 'di'}, {id: 2, deviceType: 'do'}, {id: 3, deviceType: 'ai'}, {id: 4, deviceType: 'di'}, {id: 5, deviceType: 'do'}, {id: 6, devi
el-radio的change事件点击无法获取到点击的value
weixin_45865992的博客
03-19 592
把@change改成@input。
elementUI单选多选框动态绑定显示内容和绑定值
xiaoqingqing的博客
11-20 5382
elementUI单选多选框动态绑定显示内容和绑定值，挺简单的内容，总是不熟练，小小记录一下。 单选： <!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}</el-radio>
el-radio与el-checkbox默认选中问题解决
leng0920的博客
08-03 6350
https://blog.csdn.net/cream66/article/details/105380191
element-plus：遍历el-radio及选中默认
lyna的博客
03-09 3458
<template> <el-form-item label="学生性别" prop=""> <el-radio-group v-model="sex" @change="onSexChange"> <el-radio :label="item.label" :key="item.id" v-for="item in sexOptions"> {{i.
el-radio 必填检验不生效的原因及解决办法
qq_39877681的博客
03-14 1673
el-radio 必填检验不生效的原因及解决办法
Vue + Element el-raido-button绑定事件
qq_42753983的博客
10-14 1875
el-radio-button绑定事件
el-radio-group默认选中
09-16
el-radio-group 默认选中的选项是通过 v-model 来实现的。在引用[3]的例子中，通过将 v-model 绑定到 data 中的 radio 变量，可以设置 el-radio-group 的默认选中项。在例子中，radio 的初始值为 3，所以 el-radio-group 默认选中的选项是 label 值为 3 的备选项。 中的代码片段示例： ``` <template> <el-radio-group v-model="radio"> <el-radio :label="1">备选项</el-radio> <el-radio :label="2">备选项</el-radio> <el-radio :label="3">备选项</el-radio> </el-radio-group> </template> <script> export default { data() { return { radio: 3 }; } } </script> ``` 所以 el-radio-group 默认选中的是 label 值为 3 的备选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值