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 相关文章推荐
js移除事件 js绑定事件实例应用
Nov 28 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
bootstrap table实例详解
Jan 06 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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脚本数据库功能详解(下)
2006/10/09 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php中hashtable实现示例分享
2014/02/13 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
BootStrap导航栏问题记录
2017/07/31 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
python实现哈希表
2014/02/07 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python爬虫容易学吗
2020/06/02 Python
社区党总支书记先进事迹材料
2014/01/24 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
学生安全承诺书
2014/05/22 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫