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程序之undefined篇(中)
Nov 23 Javascript
jquery插件之easing使用
Aug 19 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
微信小程序canvas动态时钟
Oct 22 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递归删除目录与文件的方法
2015/01/30 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
TypeScript入门-接口
2017/03/30 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python连接SQLServer2000的方法详解
2017/04/19 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python flask安装和命令详解
2019/04/02 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
办公室副主任职责范本
2014/03/08 职场文书
师范类求职信
2014/06/21 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
九年级历史教学反思
2016/02/19 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
Golang Web 框架Iris安装部署
2022/08/14 Python