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 相关文章推荐
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
node实现的爬虫功能示例
May 04 Javascript
Js经典案例的实例代码
May 10 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
记录一次websocket封装的过程
Nov 23 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和浏览器重定向
2009/03/16 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
js字符串转成JSON
2013/11/07 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python 迭代器与生成器实例详解
2017/05/18 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python write无法写入文件的解决方法
2019/01/23 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
调解协议书
2014/04/16 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers