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 相关文章推荐
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
Angular6新特性之Angular Material
Dec 28 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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访问查询mysql数据的三种方法
2006/10/09 PHP
php函数连续调用实例分析
2015/07/30 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
贷款承诺书范文
2014/05/19 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
行政处罚事先告知书
2015/07/01 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技