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中实现命名空间
Nov 23 Javascript
javascript 写类方式之三
Jul 05 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
JS实现瀑布流效果
Mar 07 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+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
手机端转换rem适应
2017/04/01 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python import自定义模块方法
2015/02/12 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python复制文件操作实例详解
2015/11/10 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python实现SMTP邮件发送
2020/06/16 Python
python使用建议技巧分享(三)
2020/08/18 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
应用化学专业本科生求职信
2013/09/29 职场文书