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参数的小问题
Mar 02 Javascript
js一组验证函数
Dec 20 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js中判断控件是否存在
Aug 25 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
innerText 使用示例
Jan 23 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 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原创论坛
2006/10/09 PHP
正则表达式语法
2006/10/09 Javascript
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
js闭包实例汇总
2014/11/09 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
新闻编辑自荐信
2013/11/03 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL