vue 实现单选框设置默认选中值


Posted in Javascript onNovember 07, 2019

vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的

html部分是通过v-for取的后台的数据

<li v-for="(value,i) in addList" :key="value.id">          
   <input class="radio" type="radio" name="radios" :value="i" v-model="radio" />                   
</li>

生成后的代码就是

<li>        
   <input class="radio" type="radio" name="radios" value="0" v-model="radio" />  
   <input class="radio" type="radio" name="radios" value="1" v-model="radio" />  
   <input class="radio" type="radio" name="radios" value="2" v-model="radio" />                 
</li>

js部分(只需要将v-model的data值设置为想要默认选中的value值即可)

//在data中设置默认选中第一个
radio:'0',

以上这篇vue 实现单选框设置默认选中值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
JS实现时间校验的代码
May 25 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 #Javascript
vue获取data数据改变前后的值方法
Nov 07 #Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 #Javascript
vue.js循环radio的实例
Nov 07 #Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 #Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
You might like
PHP开发负载均衡指南
2010/07/17 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
javascript表单验证大全
2015/08/12 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python实现多线程网页下载器
2018/04/15 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
详解Python 循环嵌套
2020/07/09 Python
Python logging模块handlers用法详解
2020/08/14 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
小学清明节活动总结
2014/07/04 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
暂停营业通知
2015/04/25 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Python3.10的一些新特性原理分析
2021/09/15 Python