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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
js new Date()实例测试
Oct 31 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
php学习笔记 数组的常用函数
2011/06/13 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
详解JS构造函数中this和return
2017/09/16 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
利用Python破解验证码实例详解
2016/12/08 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python实现词法分析器
2019/01/31 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python如何基于redis实现ip代理池
2020/01/17 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
syb养殖创业计划书
2014/01/09 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
领导班子整改措施
2014/10/24 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers