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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
如何快速上手Vuex
Feb 14 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
Vue组件中slot的用法
Jan 30 Javascript
ES6关于Promise的用法详解
May 07 Javascript
Vue中props的详解
May 16 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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
多重?l件?合查?(二)
2006/10/09 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
培训科主任岗位职责
2014/08/08 职场文书
交通事故案件代理词
2015/05/23 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript