vue.js选中动态绑定的radio的指定项


Posted in Javascript onJune 02, 2017

上一文,介绍了vue.js动态添加、删除绑定的radio选项,本文介绍如何选中radio的某一项

vue.js选中动态绑定的radio的指定项

绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是:

不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中。

选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染checked这个属性就好了.

view 改一下:

"<input type='radio' :name='groupName' :checked='option.checked'>{{option.text}}"

checked='option.checked'   如果option.checked为true,他就渲染checked这个属性,否则input元素没有这个属性。

这样绑定后,我们在vue的methods里面设置,把当前索引的radio绑定model的checked属性设置为true,其他的必须设置为false,这样才和上面的绑定对应,不然全是true了,绑定就会有问题了。

checkOption: function (e, optionIndex) { 
 $.each(vm.options, function (index, item) { 
  item.checked = false;       
 }); 
 vm.options[optionIndex].checked = true; 
 }

以上所述是小编给大家介绍的vue.js选中动态绑定的radio的指定项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
Vue.js中数据绑定的语法教程
Jun 02 #Javascript
SpringMVC+bootstrap table实例详解
Jun 02 #Javascript
BootStrap daterangepicker 双日历控件
Jun 02 #Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 #Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 #Javascript
javascript实现延时显示提示框效果
Jun 01 #Javascript
You might like
德劲1102收音机的打理维修案例
2021/03/02 无线电
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
聊聊python中的循环遍历
2020/09/07 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL