总结:
: label=“1”,表示label的值应为数字1
label=“1”,表示label的值应为字符串1

**问题描述:**在写编辑信息弹窗时,性别的值一直不能根据v-model的值选中,但是用{{editForm.sex}}是能正确打印出单选框的label值的。

以下是我的代码:

模板:

<el-radio-group v-model="editForm.sex"><el-radio class="radio" :label="1">男</el-radio><el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>

数据结构:

        //编辑界面数据editForm: {id: 0,name: '',sex: -1,},

数据:

        tableData: [{name:'tom',sex:‘1’},{name:'cat',sex:‘0’},],

结果发现,是因为我定义的数据sex的字段为数字,而数据的sex值为字符串,两者不匹配,于是该Radio单选框组件默认值就选不中。
只要将数据中sex改为数字即可。

        tableData: [{name:'tom',sex:1},{name:'cat',sex:0},],

分析原因:
翻阅vue文档未专门提及该问题,以下是自己的总结。
: label=“xx” vue特有的v-bind用于动态绑定class、对象和数组,所以原封不动解析出所填内容(否则数组加引号就变成字符串了)

label=“1”,vue支持自定义属性,不会被vue解析,所以label的值就是"1"。注:原生html不支持,只支持以data-开头的自定义属性

vue element-ui Radio单选框默认值选不中的原因:混用字符和数字相关推荐

  1. 饿了么ui的单选框默认值渲染不出来解决

    单选框绑定的值是字符串类型,后端传进来整数类型前端的单选框无法选中,在前端使用toString方法将整数转化一下即可

  2. 102.1 html radio单选框默认选中

    html radio单选框默认选中 '<input type="radio" name="os" value="0">IOS', ...

  3. jquery 获取或设置radio单选框选中值的方法

    jquery 获取或设置radio单选框选中值的代码 1.获取选中值,三种方法都可以: 2.设置第一个Radio为选中值: 3.设置最后一个Radio为选中值: 4.根据索引值设置任意一个radio为 ...

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

    难度值:⭐ 需求描述: 弹窗里面的表单,是复用的后台返回数据,输入框里面的数据复用很容易,通过prop属性即可. 问题在于radio单选框,怎么将后台给的数值绑定为默认值 示例效果图: 涉及知识: 一 ...

  5. 【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器

    1.Radio 单选框 基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...

  6. 前端radio单选框默认选中_「radio选中」单选框radio总结(获取值、设置默认选中值、样式) - seo实验室...

    radio选中 单选框 radio 是 否 1.获取值 $("input[name='killOrder']:checked").val(); $('input:radio:che ...

  7. 前端radio单选框默认选中_单选框radio总结(获取值、设置默认选中值、样式)...

    是 否 1.获取值 $("input[name='killOrder']:checked").val(); $('input:radio:checked').val(): $(&q ...

  8. 前端radio单选框默认选中_开发记录篇前端内容1

    有段时间没有更新文章了,因为是用的公司电脑,没有虚拟机,所以就没法演示hadoop相关的东西了,而且大数据篇的东西需要花费一些时间和精力去收集整理内容,那大数据篇就先暂停一下.最近这段时间的话我可能会 ...

  9. vue+element ui实现树形表格加复选框(checkbox)

    element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...

最新文章

  1. Sqlserver 查询 临时字段
  2. linux 用户使用率的限制,linux中限制CPU和内存占用率方法
  3. helm离线安装helm-push插件
  4. 关于爬虫的一些工具。
  5. C# -- 多线程向同一文件写入
  6. 至强cpu型号列表_装机必看——CPU型号参数详解
  7. 周末也需要学习 分享一个 Flutter 波浪波动效果的登录页面的背景 Flutter ClipPath实现的波动
  8. gifcam使用缩小内存_Vuex3.1.1更新:支持jsDelivr,修复内存泄漏
  9. Python:创建GUI界面步骤
  10. 尾矿库监测 GNSS北斗高精度定位终端机应用
  11. C++_SHFileOperation文件夹操作
  12. html5视频加速播放插件,Video Speed Controller Chrome(HTML5视频加速播放插件) v0.3.2 官方免费版...
  13. word添加MathType插件
  14. 从vc6.0转到vs2005 2008等出现的错误详解(HYD整理)
  15. c语言求两个字符串的交集,用c语言求两个集合的交集,并集,差集
  16. 克罗内克积Kronecker
  17. R_leaflet包_最易上手地图教程(一)
  18. 智慧能源发展方向、应用趋势
  19. 逻辑回归logistic原理(python代码实现)
  20. RocketMQ消息生产者是如何选择Broker的

热门文章

  1. 服务器系统不用关机,云服务器不用了要关机吗
  2. springmvc接收请求参数(springmvc教程二)
  3. 戴尔G7音频驱动问题
  4. 联想小新Pro14 2023款和2022款区别
  5. 微信小程序页面跳转,url传参参数丢失问题
  6. vmware安装ubuntu Intel VT-x 处于禁用状态
  7. OSChina 周日乱弹——如何请假不被老板骂
  8. 微信支付 APP端 后端 第四-五弹 退款定时任务 账单下载
  9. html页面顶部横条,CSS:页面顶部的精简横幅(如本页中的橙色横幅)
  10. unl文件导入orcle数据库