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打造PHP的AJAX表单提交实例
Nov 03 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
node.js的事件机制
Feb 08 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
jquery实现下载图片功能
Jul 18 jQuery
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP静态文件生成类实例
2014/11/29 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
pandas数值计算与排序方法
2018/04/12 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
jupyter notebook 重装教程
2020/04/16 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
银行求职推荐信范文
2013/11/30 职场文书
《胡杨》教学反思
2014/02/16 职场文书
绿色环保口号
2014/06/12 职场文书
植树造林的宣传标语
2014/06/23 职场文书
2014年教师节活动总结
2014/08/29 职场文书
计划生育目标责任书
2015/05/09 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android