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 new fun的执行过程
Aug 05 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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新建文件自动编号的思路与实现
2011/06/27 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
结束运行python的方法
2020/06/16 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
幼儿园招生广告
2014/03/19 职场文书
村干部培训班主持词
2014/03/28 职场文书
差生评语大全
2014/05/04 职场文书
奉献演讲稿范文
2014/05/21 职场文书
群众路线剖析材料
2014/09/30 职场文书
工作收入住址证明
2014/10/28 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
微信搭讪开场白
2015/05/28 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA