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中的异常处理方法分享
Dec 22 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue组件中实现嵌套子组件案例
Aug 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
mysql5详细安装教程
2007/01/15 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
js如何验证密码强度
2020/03/18 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
python中退出多层循环的方法
2018/11/27 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
蛋白质世界:Protein World
2017/11/23 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js