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面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
解决vue scoped html样式无效的问题
Oct 24 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中cookie的作用域
2008/03/27 PHP
js模拟类继承小例子
2010/07/17 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
图解javascript作用域链
2019/05/27 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python dataframe astype 字段类型转换方法
2018/04/11 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python进行特征提取的示例代码
2020/10/15 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Puma印度官网:德国运动品牌
2019/10/06 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
打架检讨书800字
2014/01/10 职场文书
明信片寄语大全
2014/04/08 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
先进典型事迹材料
2014/12/29 职场文书
小学生差生评语
2014/12/29 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
小学生暑假安全公约
2015/07/14 职场文书
导游词之青城山景区
2019/09/27 职场文书